Skip to content

Instantly share code, notes, and snippets.

@AustinDizzy

AustinDizzy/README.md

Created May 17, 2015 21:43
Show Gist options
  • Save AustinDizzy/0f81b15db9de2aa0ca3c to your computer and use it in GitHub Desktop.
Save AustinDizzy/0f81b15db9de2aa0ca3c to your computer and use it in GitHub Desktop.
Download ZIP
A small demonstration on xkcd #1335's time data collection.
Raw
README.md

xkcd-now

A small demonstration on xkcd #1335's time data collection.

Demo here.

preview

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>xkcd now demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<script type='text/javascript' src='index.js'></script>
<style type='text/css'>
body {
text-align:center;
}
input, img {
margin: 0 auto;
}
</style>
</head>
<body>
<input type="time" step="900">
<img src="http://imgs.xkcd.com/comics/now/19h00m.png" id="xkcd" />
</body>
</html>
Raw
index.js
$(function(){
var now = new Date();
var hr = now.getHours() > 12 ? now.getHours() % 12 : now.getHours();
$.fn.replaceWithCallback = function (replace, callback) {
var ret = $.fn.replaceWith.call(this, replace);
if (typeof callback === 'function') {
callback.call(ret);
}
return ret;
};
$("input").replaceWithCallback("<input type=\"time\" step=\"900\" value=\"" + (hr.toString().length == 1 ? "0" + hr : hr) + ":" + (((Math.round(now.getMinutes() / 15) * 15) % 60) || "00") + "\" />", function () {
$("input").on("keyup mouseup", function () {
var inTm = $(this).val().split(":");
if (inTm[1] % 15 != 0) inTm[1] = ((Math.round(inTm[1] / 15) * 15) % 60) || "00";
$("#xkcd").attr("src", "http://imgs.xkcd.com/comics/now/" + inTm[0] + "h" + inTm[1] + "m.png");
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment