New and Improved JavaScript Clock

Earlier this year, I posted an article explaining how to implement an unobtrusive JavaScript dynamic clock. While not completely earth-shattering or cutting-edge or anything like that, the dynamic JavaScript clock has received some great feedback from users who found the script to be exactly what they were looking for. In fact, a couple of weeks ago, Bill Brown went above and beyond by taking the time to improve the script with some great new features, including a “blinking seconds separator (for kicks)” and removal of “the need for the noscript tag.” Of course everything is yours to customize as desired. This quick post shares the complete script sent by Bill in a recent email (with slightly reformatted markup).

Demo

Unobtrusive JavaScript Clock

To build your own unobtrusive JavaScript clock, simply copy and paste the following code into a blank PHP document (no editing required!):

<!DOCTYPE>
<html>
	<head>
		<title>Demo: New and Improved JavaScript Clock - Perishable Press</title>
		<style type="text/css">
			.style {
				padding: 20px; font-family: monospace; font-weight: bold;
				border: 3px solid #c00; background-color: #f5f5e5;
				}
			.scripted .style {
				border: 3px double #ccc;
				}
		</style>
	</head>
	<body>
		
		<h1>New and Improved JavaScript Clock</h1>
		
		<div id="datetime" class="style">
			<span id="date"><?php echo date("l, F j, Y ~ "); ?></span> 
			<span id="time"><?php echo date("h:i:s A", time()); ?></span>
		</div>
		
		<script type="text/javascript">
			
			// Unobtrusive JavaScript Dynamic Clock
			// https://perishablepress.com/new-and-improved-javascript-clock/
			
			(function() { document.getElementsByTagName('html')[0].className='scripted' })();
			
			String.prototype.pad = function(l, s, t) {
				return s || (s = " "), (l -= this.length) > 0 ? 
				(s = new Array(Math.ceil(l / s.length) 
				+ 1).join(s)).substr(0, t = !t ? l : t == 1 ? 0 : Math.ceil(l / 2))
				+ this + s.substr(0, l - t) : this;
			};
			
			var addLoadEvent = function (func) {
				var oldonload = window.onload;
				if (typeof window.onload != 'function') {
					window.onload = func;
				} else {
					window.onload = function() {
						if (oldonload) {
							oldonload();
						}
						func();
					}
				}
			};
			
			var xClock = function () {
				var xC = null, xN = null, xH = null, xI = null,
				    xM = null, xS = null, xT = null, AP = null;
			
				if (!document.getElementById) return;
				xC = document.getElementById("time");
				if (!xC.nodeName) return;
				xN = new Date();
				xH = xN.getHours().toString().pad(2,'0',0);
				xM = xN.getMinutes().toString().pad(2,'0',0);
				xS = xN.getSeconds().toString().pad(2,'0',0);
				AP = (xH >= 12) ? "PM" : "AM";
				xH = (xH >= 13) ? (xH - 12) : xH;
				sS = (xN.getMilliseconds() >= 500) ? ":" : "&middot;";
				xT = xH + ":" + xM + sS + xS + " " + AP;
				xC.innerHTML = xT;
				xI = !xI ? null : clearTimeout(xI);
				xI = setTimeout(xClock, 500);
			};
			
			addLoadEvent(xClock);
			
		</script>
		
	</body>
</html>

This new version has a number of useful improvements, like adding a scripted class to the <html> tag, 12-hour time format, and more. Thanks again to Bill Brown for sharing this new and improved JavaScript clock.

Download

Here you may download the source files for this tutorial/demo: