Large 12 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:23 am</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: 150pt;
				font-weight: bold;
			}

JavaScript

var lastText = "";
			
			function updateClock() {
				var d = new Date();
				var s = "";
				s += ((d.getHours() + 11) % 12 + 1) + ":"
				s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes() + " ";
				s += d.getHours() >= 12 ? "pm" : "am";
				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);