Unobtrusive JavaScript Dynamic Clock
Published Tuesday, March 4, 2008 @ 10:49 am • 7 Responses
![[ ~{*}~ ]](http://perishablepress.com/press/wp-content/images/2008/misc-chunks/js-clock-deco.gif)
In this tutorial, I present an easy way to add a little extra flair to your site by adding some dynamic clock functionality. Using unobtrusive JavaScript, a bit of (X)HTML markup, and a dash of PHP (optional), we will create a dynamic clock that degrades gracefully to a static date/time-stamp when JavaScript is unavailable. No need to get all verbose with this one, so let’s dive right in..
Step 1: The JavaScript
Place the following code into a JavaScript file called “xClock.js” (or whatever) and upload to your server:
// Unobtrusive JavaScript Dynamic Clock
// http://perishablepress.com/press/2008/03/04/unobtrusive-javascript-dynamic-clock/
function xClock() {
xC = new Date;
xV = vClock(xC.getHours()) + ":" + vClock(xC.getMinutes()) + ":" + vClock(xC.getSeconds());
document.getElementById("xClock").innerHTML = xV;
setTimeout("xClock()", 1000);
}
function vClock(v) {
return (v > 9) ? "" + v : "0" + v;
}
// addLoadEvent @ http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(xClock);The first portion of the code comprises the dynamic clock, while the second portion is an extremely useful “addLoadEvent” function provided by Simon Willison. After the web page has loaded, the addLoadEvent function will execute the xClock function. Next, let’s add some markup..
Step 2: The Markup
This specifics of this step will vary depending on your desired page layout, but essentially we want to create an empty <span> or <div> (or whatever) and give it an id="xClock", like so:
<span id="xClock"></span> will output this: (after completion of step #3)
Simply place an empty <span> with an id="xClock" wherever you would like the dynamic clock to be displayed. For example, you could place the target element in your sidebar using something similar to the following:
<h4><?php echo date("l, F j, Y ~ "); ?><span id="xClock"></span></h4>This code does a couple of things. In the first line, we begin by wrapping the clock output in warm & fuzzy <h4> heading. We then use PHP to echo the date, which is formatted as “Weekday, Month Day, Year”. The date information is then proceeded by the required element for the dynamic xClock itself (i.e., <span id="xClock"></span>). The end result would present todays date and current time as:
Tuesday, March 4, 2008 ~
Of course, as completely unobtrusive code, the xClock functionality degrades gracefully when JavaScript is unavailable — the clock simply disappears! This is why echoing the date via PHP is good idea. It ensures that some chronological information is displayed even when the dynamic clock is unavailable. Of course, if you wanted to get really fancy, you could use a little <noscript> action to echo a static instance of the hour, minute and second that the page was created. Adding this to our previous example, we get:
<h4><?php echo date("l, F j, Y ~ "); ?><span id="xClock"></span>
<noscript><?php echo date("h:i:s", time(); ?></noscript></h4>..which, when JavaScript is unavailable, will output the following static date and time:
Tuesday, March 4, 2008 ~ 11:33:07
The only difference between this non-JS output and the previous, JS-enabled output is the dynamic property of the clock. Not too shabby!
Step 3: Call the Script
Finally, we need to call the xClock.js script itself by placing the following element into the <head> or footer section of your document:
<script src="http://domain.tld/js/xClock.js" type="text/javascript" ></script>Once this is in place, load the target page in a browser and check that everything is working. If everything went according to plan, your site should now be sporting a new dynamic clock for all the world to see. You may also want to disable JavaScript in your browser and check the formatting of the static timestamp. If needed, it is also possible to adjust the default “timeout” setting, which is currently set at 1000 ms. With a little imagination, the layout/design possibilities for adding a sense of time to your blog are endless! That’s all for now, stay tuned for more unobtrusive JavaScript tips and tricks arriving soon! ;)
About this article
Related articles
- New and Improved JavaScript Clock
- Unobtrusive JavaScript: Auto-Clear and Restore Multiple Form Inputs on Focus
- Open External Links as Blank Targets via Unobtrusive JavaScript
- Unobtrusive JavaScript: 5 Ways to Remove Unwanted Focus Outlines
- How to Fix the Wonky Windows XP Clock
- Go Back via JavaScript and PHP
- Optimize Convoluted Code via JavaScript
Dialogue
7 Responses Jump to comment form
March 16, 2008 at 1:02 am
Hey Jeff thanks for sharing the script :) I find it very light and handy, as compared to other ones available on line. Oh and thanks for explaning what the script does in the post, I guess very little people do so (and they usually just dump the code in a post and tell you where to paste it, that’s all).
Thanks!
July 13, 2008 at 7:17 am
Excellent! This is definitely better than using Java based clocks :)
November 29, 2008 at 1:53 pm
I’m curious about your use of the (increasingly unpopular) noscript tag. Couldn’t you simply populate span#xClock with the time from PHP and overwrite it with the new time from JavaScript? Barring that, couldn’t you also simply add something like:
<span id="yClock"><?php echo date("h:i:s", time(); ?></span>
…and then remove this element in your init function:
var yClock = document.getElementById('yClock');
yClock.parentNode.removeChild(yClock);
Share your thoughts..
← Previous post • Next post →
« Perishable News: Site Upgrades, Upcoming Interview, and PageRank Update • Fake Slifer Yu-Gi-Oh! Cards on Ebay »
1 • Gordon
March 5, 2008 at 1:41 pm
Is there any way to use this code to display st, nd, rd or th after the date i.e. 1st, 2nd, 3rd or 4th March 2008 ?