hakanai/clock.html

## clock.html
<!doctype html>
<html>
  <head>
    <style type="text/css">

      html, body {
        height: 100%;
        width: 100%;
        padding: 0px;
        margin: 0px;
      }

      div {
        width: 12.5%;
        height: 12.5%;
        padding: 0px;
        margin: 0px;
        float: left;
      }

    </style>
    <script type="text/javascript">

      var NROW = 8;
      var NCOL = 8;

      var divs = [];
      var timezone = 'Asia/Tokyo';
      var formatter = null;

      window.onload = function() {
        var params = getGETParams();
        if (params["timezone"] != null) {
          timezone = params["timezone"];
        }
        formatter = new Intl.DateTimeFormat('en-us', {
          weekday: 'short',
          year: 'numeric',
          month: 'numeric',
          day: 'numeric',
          hour: 'numeric',
          minute: 'numeric',
          second: 'numeric',
          millisecond: 'numeric',
          timeZone: timezone
        });

        for (var i = 0; i < NROW * NCOL; i++) {
          var d = document.createElement("div");
          d.classList.add("div" + i);
          d.style.cssText = "background-color: white";
          document.body.appendChild(d);
          divs.push(d);
        }
        update();
      }

      function getGETParams() {
        var gets = window.location.search.substring(1).split("&");
        var ret = {};
        for (var i = 0; i < gets.length; i++) {
          var kv = gets[i].split("=");
          if (kv.length == 2) {
            ret[kv[0]] = kv[1];
          } else {
            ret[kv[0]] = true;
          }
        }
        return ret;
      }

      function updateDivs(val, divId) {
      	// High bits in R, then G, then lowest in B.
      	// So it's going to be very black and blue for almost everything.
      	// Just hope that you can get the colour values back out at the same precision.
        divs[divId].style.cssText = "background-color: #" + val.toString(16).padStart(6, "0");
      }

      function extract(parts, part) {
        return parts.find(function(x) { return x.type == part }).value;
      }

      // Workaround for lack of numeric formatting for weekday field.
      var reverseWeekdays = {"Sun": 0, "Mon": 1, "Tue": 2, "Wed": 3, "Thu": 4, "Fri": 5, "Sat": 6};
      function parseWeekday(str) {
        return reverseWeekdays[str];
      }

      function update() {
        requestAnimationFrame(update);

        var parts = formatter.formatToParts(new Date());

        updateDivs(parseWeekday(extract(parts, 'weekday')), 0);
        updateDivs(parseInt(extract(parts, 'year')), 1);
        updateDivs(parseInt(extract(parts, 'month')), 2);
        updateDivs(parseInt(extract(parts, 'day')), 3);
        updateDivs(parseInt(extract(parts, 'hour')), 4);
        updateDivs(parseInt(extract(parts, 'minute')), 5);
        updateDivs(parseInt(extract(parts, 'second')), 6);
        updateDivs(parseInt(extract(parts, 'millisecond')), 7);

        // TODO: moon phases would be nice, true, but I'd also want its position and the Earth's tilt.
      }

    </script>
  </head>
  <body>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<style type="text/css">

	html, body {
	height: 100%;
	width: 100%;
	padding: 0px;
	margin: 0px;
	}

	div {
	width: 12.5%;
	height: 12.5%;
	padding: 0px;
	margin: 0px;
	float: left;
	}

	</style>
	<script type="text/javascript">

	var NROW = 8;
	var NCOL = 8;

	var divs = [];
	var timezone = 'Asia/Tokyo';
	var formatter = null;

	window.onload = function() {
	var params = getGETParams();
	if (params["timezone"] != null) {
	timezone = params["timezone"];
	}
	formatter = new Intl.DateTimeFormat('en-us', {
	weekday: 'short',
	year: 'numeric',
	month: 'numeric',
	day: 'numeric',
	hour: 'numeric',
	minute: 'numeric',
	second: 'numeric',
	millisecond: 'numeric',
	timeZone: timezone
	});

	for (var i = 0; i < NROW * NCOL; i++) {
	var d = document.createElement("div");
	d.classList.add("div" + i);
	d.style.cssText = "background-color: white";
	document.body.appendChild(d);
	divs.push(d);
	}
	update();
	}

	function getGETParams() {
	var gets = window.location.search.substring(1).split("&");
	var ret = {};
	for (var i = 0; i < gets.length; i++) {
	var kv = gets[i].split("=");
	if (kv.length == 2) {
	ret[kv[0]] = kv[1];
	} else {
	ret[kv[0]] = true;
	}
	}
	return ret;
	}

	function updateDivs(val, divId) {
	// High bits in R, then G, then lowest in B.
	// So it's going to be very black and blue for almost everything.
	// Just hope that you can get the colour values back out at the same precision.
	divs[divId].style.cssText = "background-color: #" + val.toString(16).padStart(6, "0");
	}

	function extract(parts, part) {
	return parts.find(function(x) { return x.type == part }).value;
	}

	// Workaround for lack of numeric formatting for weekday field.
	var reverseWeekdays = {"Sun": 0, "Mon": 1, "Tue": 2, "Wed": 3, "Thu": 4, "Fri": 5, "Sat": 6};
	function parseWeekday(str) {
	return reverseWeekdays[str];
	}

	function update() {
	requestAnimationFrame(update);

	var parts = formatter.formatToParts(new Date());

	updateDivs(parseWeekday(extract(parts, 'weekday')), 0);
	updateDivs(parseInt(extract(parts, 'year')), 1);
	updateDivs(parseInt(extract(parts, 'month')), 2);
	updateDivs(parseInt(extract(parts, 'day')), 3);
	updateDivs(parseInt(extract(parts, 'hour')), 4);
	updateDivs(parseInt(extract(parts, 'minute')), 5);
	updateDivs(parseInt(extract(parts, 'second')), 6);
	updateDivs(parseInt(extract(parts, 'millisecond')), 7);

	// TODO: moon phases would be nice, true, but I'd also want its position and the Earth's tilt.
	}

	</script>
	</head>
	<body>
	</body>
	</html>