AustinDizzy/README.md

## README.md

      
    Raw
  

              README.md
            
          
    xkcd-now

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


## 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>

## 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");
    });
  });
});
	<!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>
	$(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");
	});
	});
	});