A Graphical Clock in JavaScript

This clock uses JavaScript's images[] array to update the time every half second. It uses the current local time from the client computer. The images below are dynamically replaced with the current time.

Note: The clock doesn't start updating until the page (including the images) loads. The initial time and date value uses all 10 digits, so they will be cached for fast updates.

Source

<HTML>
<HEAD><TITLE>Yet Another Silly JavaScript Clock</TITLE>
<SCRIPT>
//javascript clock script
function Clock() {
   D = new Date();
   hh = D.getHours();
   mm = D.getMinutes();
   ss = D.getSeconds();
   yy = D.getYear();
   mt = D.getMonth() + 1;
   dd = D.getDate();

// change the digit images
   document.images[8].src = Url(hh/10);
   document.images[9].src = Url(hh%10);
   document.images[11].src = Url(mm/10);
   document.images[12].src = Url(mm%10);
   document.images[14].src = Url(ss/10);
   document.images[15].src = Url(ss%10);

// time above, date below
   document.images[0].src = Url(mt/10);
   document.images[1].src = Url(mt%10);
   document.images[3].src = Url(dd/10);
   document.images[4].src = Url(dd%10);
   document.images[6].src = Url(yy/10);
   document.images[7].src = Url(yy%10);

// set timeout for next time (half second)
   window.setTimeout("Clock()",500);
}


// converts 4 (numeric) to "c4.gif"
function Url(num) {
num = Math.floor(num);
return "c" + num + ".gif";

}
</SCRIPT>
</HEAD>
<BODY onLoad="window.setTimeout('Clock();',3000)">
<H1>A Graphical Clock in JavaScript</H1>
<hr>
This clock uses JavaScript's images[] array to update the time every half
second. It uses the current local time from the client computer. The images
below are dynamically replaced with the current time.
<HR>
<img src="c6.gif" HEIGHT=20 WIDTH=15><img src="c7.gif" HEIGHT=20 WIDTH=15><img src="slash.gif" HEIGHT=20 WIDTH=13><img src="c8.gif" HEIGHT=20 WIDTH=15><img src="c9.gif" HEIGHT=20 WIDTH=15><img src="slash.gif" HEIGHT=20 WIDTH=13><img src="c0.gif" HEIGHT=20 WIDTH=15><img src="c0.gif" HEIGHT=20 WIDTH=15>
<img src="c0.gif" HEIGHT=20 WIDTH=15><img src="c1.gif" HEIGHT=20 WIDTH=15><img src="colon.gif" HEIGHT=20 WIDTH=9><img src="c2.gif" HEIGHT=20 WIDTH=15><img src="c3.gif" HEIGHT=20 WIDTH=15><img src="colon.gif" HEIGHT=20 WIDTH=9><img src="c4.gif" HEIGHT=20 WIDTH=15><img src="c5.gif" HEIGHT=20 WIDTH=15>
<HR>
Note: The clock doesn't start updating until the page (including the images) loads. The initial time and date value
uses all 10 digits, so they will be cached for fast updates.
<HR>
</BODY>
</HTML>