JavaScript Graphic Digital Clock Demo

To use digitalclock.js, place these lines in the head of your HTML page

<script src="digitalclock.js"> </script>

Place these lines somewhere in the body of your HTML page

<script language="javascript"> DisplayClock(); StartClock(); </script>

Contents of "digitalclock.js":
//javascript file digitclock.js // Copyright 1998 by Charles F. Monroe //set these four variables and code is ready to go var imgdir = ""; var imgext = ".jpg"; //must be .jpg or .gif var digitw = 17; var digith = 17; var img = new Array(); var i; for (i=0; i<=14; i++) { img[i] = new Image(); } var am,pm,blank,mm,colon; function LoadClockImages() { img[0].src = imgdir + "0" + imgext; img[1].src = imgdir + "1" + imgext; img[2].src = imgdir + "2" + imgext; img[3].src = imgdir + "3" + imgext; img[4].src = imgdir + "4" + imgext; img[5].src = imgdir + "5" + imgext; img[6].src = imgdir + "6" + imgext; img[7].src = imgdir + "7" + imgext; img[8].src = imgdir + "8" + imgext; img[9].src = imgdir + "9" + imgext; am = 10; img[am].src = imgdir + "a" + imgext; pm = 11; img[pm].src = imgdir + "p" + imgext; blank = 12; img[blank].src = imgdir + "blank" + imgext; mm = 13; img[mm].src = imgdir + "m" + imgext; colon = 14; img[colon].src = imgdir + "colon" + imgext; } LoadClockImages(); //these variables store previous values and are used to test whether a //value has changed. an image is updated only if its corresponding value //has changed, thus helping the graphical clock to run more efficiently var prevh10 = -1; var prevh1 = -1; var prevm10 = -1; var prevm1 = -1; var prevs10 = -1; //var prevs1 = -1; --- not used since each second the seconds change anyway var prevhalfday = "$$"; var prevhalfdaym = "$$"; var halfdaym = "mm"; var prevcolon = "$$"; var currcolon = "cc"; //this function is called when the page is loaded and is called once each //second thereafter. if Running is set to false when the user clicks on "Stop //the clock", the function does nothing except call itself one second later, etc. //the user can click "Start the clock? to reset Running to true, thus re-enabling //this function. function StartClock() { var dt = new Date(); var h = dt.getHours(); var halfday = "pm"; if (h < 13) halfday = "am"; if (h==0) h = 24; h = h % 12; if (h==0) h = 12; var h1 = h % 10; var h10 = Math.floor(h / 10); var m = dt.getMinutes(); var m1 = m % 10; var m10 = Math.floor(m / 10); var s = dt.getSeconds(); var s1 = s % 10; var s10 = Math.floor(s / 10); if (h10 != prevh10) { if (h10==0) { document['h10'].src = eval("img[" + blank + "].src"); } else { document['h10'].src = eval("img[" + h10 + "].src"); } prevh10 = h10; } if (h1 != prevh1) { document['h1'].src = eval("img[" + h1 + "].src"); prevh1 = h1; } if (m10 != prevm10) { document['m10'].src = eval("img[" + m10 + "].src"); prevm10 = m10; } if (m1 != prevm1) { document['m1'].src = eval("img[" + m1 + "].src"); prevm1 = m1; } if (s10 != prevs10) { document['s10'].src = eval("img[" + s10 + "].src"); prevs10 = s10; } document['s1'].src = eval("img[" + s1 + "].src"); if (halfday != prevhalfday) { if (halfday=="am") document['xm'].src = eval("img[" + am + "].src"); else document['xm'].src = eval("img[" + pm + "].src"); prevhalfday = halfday; } if (halfdaym != prevhalfdaym) { document['m'].src = eval("img[" + mm + "].src"); prevhalfdaym = halfdaym; } if (currcolon != prevcolon) { document['colon1'].src = eval("img[" + colon + "].src"); document['colon2'].src = eval("img[" + colon + "].src"); prevcolon = currcolon; } setTimeout('StartClock()',1000); //repeat every second } //function ChangeTime(imgname) //{ // js has no way to change the system time //} function ImgString(name) { var imgst; imgst = '<img src="'+imgdir+'blank'+imgext+'" width='+digitw+' height='+digith+' border=0 '; imgst += 'name="'+name+'">'; return imgst; } function DisplayClock() { document.write('<table border=0><tr><td>'); document.write(ImgString("h10")); document.write(ImgString("h1")); document.write(ImgString("colon1")); document.write(ImgString("m10")); document.write(ImgString("m1")); document.write(ImgString("colon2")); document.write(ImgString("s10")); document.write(ImgString("s1")); document.write(ImgString("blank")); document.write(ImgString("xm")); document.write(ImgString("m")); document.write('</td></tr></table>'); }