Large 24 hour clock

by brianlmerritt

HTML

<div style="width:100%; height:100%; display:table">
    <div id="clock" style="width:100%; height:100%; display:table-cell">11:15
    </div>
</div>

CSS

/* Don't change these */
			html, body {
				height: 100%;
				margin: 0;
				padding: 0;
			}
			#clock {
				text-align: center;
				vertical-align: middle;
			}
			
			/* You can customize these (font and colors) */
			html {
				background: #000000;
				color: #FFFFFF;  /* Text color */
			}
			#clock {
				font-family: sans-serif;
				font-size: 250pt;
				font-weight: bold;
			}

JavaScript

var lastText = "";
			
			function updateClock() {
				var d = new Date();
				var s = "";
				s += (10 > d.getHours()   ? "0" : "") + d.getHours()   + ":"
				s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes();
				if (lastText != s) {
					setText("clock", s);
					lastText = s;
				}
			}
			
			function setText(elemName, text) {
				var elem = document.getElementById(elemName);
				while (elem.childNodes.length > 0)
					elem.removeChild(elem.firstChild);
				elem.appendChild(document.createTextNode(text));
			}
			
			updateClock();
			setInterval(updateClock, 1000);