hardillb/clock.html

## clock.html
<html>
<head>
	<title>Clock test</title>
	<style>
.segment {
	padding: 2px;
	width: 5px;
	height: 5px;
	border-style: solid;
	border-width: 1px;
	display: inline
}

.selected {
	background: gray;
}

.row {
	padding-top: 10px;
	padding-bottom: 10px;
	width: 100%;
	height: 10px;
}
	</style>
</head>
<body>
	<div class="row" id="red"></div>
	<div class="row" id="green"></div>
	<div class="row" id="blue"></div>
	<div>
		<span id="time"></span>
	</div>
	<script type="application/javascript">

	var red = [0,0,0,0,0,0,0,0,0,0,
			   0,0,0,0,0,0,0,0,0,0,
			   0,0,0,0,0,0,0,0,0,0,
			   0,0,0,0,0,0,0,0,0,0,
			   0,0,0,0,0,0,0,0,0,0,
			   0,0,0,0,0,0,0,0,0,0];

	var green = [0,0,0,0,0,0,0,0,0,0,
				 0,0,0,0,0,0,0,0,0,0,
				 0,0,0,0,0,0,0,0,0,0,
				 0,0,0,0,0,0,0,0,0,0,
				 0,0,0,0,0,0,0,0,0,0,
				 0,0,0,0,0,0,0,0,0,0];

	var blue = [0,0,0,0,0,0,0,0,0,0,
				0,0,0,0,0,0,0,0,0,0,
				0,0,0,0,0,0,0,0,0,0,
				0,0,0,0,0,0,0,0,0,0,
				0,0,0,0,0,0,0,0,0,0,
				0,0,0,0,0,0,0,0,0,0];

	var reds = document.getElementById("red");
	var greens = document.getElementById("green");
	var blues = document.getElementById("blue");

	for (var i=0; i<60; i++) {
		var r = document.createElement('div');
		var g = document.createElement('div');
		var b = document.createElement('div');

		r.setAttribute("class", "segment");
		g.setAttribute("class", "segment");
		b.setAttribute("class", "segment");

		r.setAttribute("id", "r" + i);
		g.setAttribute("id", "g" + i);
		b.setAttribute("id", "b" + i);

		reds.appendChild(r);
		greens.appendChild(g);
		blues.appendChild(b);

	}

	setInterval(function(){
		var d = new Date();

		var h = d.getHours() - 1;
		var m = d.getMinutes();
		var s = d.getSeconds();

		h = (h + 12) % 12;
		var hb = (h+11) %12;

		var ha = h * 5;
		var hb = hb *5;

		for (var i=0; i < 5; i++) {
			var t = ha + i;
			document.getElementById("r" + (t)).className = "segment selected";
		}

		for (var i=0; i < 5; i++) {
			var t = hb + i;
			document.getElementById("r" + (t)).className = "segment";
		}

		document.getElementById("g" + m).className = "segment selected";
		document.getElementById("b" + s).className = "segment selected";

		m = (m + 59) % 60;
		s = (s + 59) % 60;

		document.getElementById("g" + m).className = "segment";
		document.getElementById("b" + s).className = "segment";

		document.getElementById("time").innerHTML = d.toTimeString();

	}, 1000);

	</script>
</body>
</html>
	<html>
	<head>
	<title>Clock test</title>
	<style>
	.segment {
	padding: 2px;
	width: 5px;
	height: 5px;
	border-style: solid;
	border-width: 1px;
	display: inline
	}

	.selected {
	background: gray;
	}

	.row {
	padding-top: 10px;
	padding-bottom: 10px;
	width: 100%;
	height: 10px;
	}
	</style>
	</head>
	<body>
	<div class="row" id="red"></div>
	<div class="row" id="green"></div>
	<div class="row" id="blue"></div>
	<div>
	<span id="time"></span>
	</div>
	<script type="application/javascript">

	var red = [0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0];

	var green = [0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0];

	var blue = [0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0];

	var reds = document.getElementById("red");
	var greens = document.getElementById("green");
	var blues = document.getElementById("blue");

	for (var i=0; i<60; i++) {
	var r = document.createElement('div');
	var g = document.createElement('div');
	var b = document.createElement('div');

	r.setAttribute("class", "segment");
	g.setAttribute("class", "segment");
	b.setAttribute("class", "segment");

	r.setAttribute("id", "r" + i);
	g.setAttribute("id", "g" + i);
	b.setAttribute("id", "b" + i);

	reds.appendChild(r);
	greens.appendChild(g);
	blues.appendChild(b);

	}

	setInterval(function(){
	var d = new Date();

	var h = d.getHours() - 1;
	var m = d.getMinutes();
	var s = d.getSeconds();

	h = (h + 12) % 12;
	var hb = (h+11) %12;

	var ha = h * 5;
	var hb = hb *5;

	for (var i=0; i < 5; i++) {
	var t = ha + i;
	document.getElementById("r" + (t)).className = "segment selected";
	}

	for (var i=0; i < 5; i++) {
	var t = hb + i;
	document.getElementById("r" + (t)).className = "segment";
	}

	document.getElementById("g" + m).className = "segment selected";
	document.getElementById("b" + s).className = "segment selected";

	m = (m + 59) % 60;
	s = (s + 59) % 60;

	document.getElementById("g" + m).className = "segment";
	document.getElementById("b" + s).className = "segment";

	document.getElementById("time").innerHTML = d.toTimeString();

	}, 1000);

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