« »

Uses images to display a clock.

Label: Live Clock using images

Demo
Enlarge
Reload
New window

Code
Files
JavaScript
HTML
Print

Live_Clock_using_images.zip

Copy All x2

<SCRIPT LANGUAGE="JavaScript">

  if (document.images) { 
    digit1 = new Image; 
    digit1.src = "digit1.gif"; 
	digit2 = new Image; 
    digit2.src = "digit2.gif";
	digit3 = new Image; 
    digit3.src = "digit3.gif";
	digit4 = new Image; 
    digit4.src = "digit4.gif";
	digit5 = new Image; 
    digit5.src = "digit5.gif";
	digit6 = new Image; 
    digit6.src = "digit6.gif";
	digit7 = new Image; 
    digit7.src = "digit7.gif";
	digit8 = new Image; 
    digit8.src = "digit8.gif";
	digit9 = new Image; 
    digit9.src = "digit9.gif";
	digit0 = new Image; 
    digit0.src = "digit0.gif";
	digitam = new Image; 
    digitam.src = "digitam.gif";
	digitpm = new Image; 
    digitpm.src = "digitpm.gif";
	digitcolon = new Image;
	digitcolon.src = "digitcolon.gif";
	digitblank = new Image;
	digitblank.src = "digitblank.gif";
	}
	
function UpdateClock(){
    var time= new Date();
    hours = time.getHours();
    mins = time.getMinutes();
    if (!document.images) return;
	digit = mins % 10;
    document.images.minsones.src=eval("digit"+digit+".src");
	digit = (mins - (mins % 10))/10;
	document.images.minstens.src=eval("digit"+digit+".src");
	if (hours > 12)
	  document.images.ampm.src=digitpm.src;
	else
	  document.images.ampm.src=digitam.src;
	if (hours > 12) hours = hours - 12;
	digit = hours % 10;
	document.images.hoursones.src=eval("digit"+digit+".src");
	digit = (hours - (hours % 10))/10;
	document.images.hourstens.src=eval("digit"+digit+".src");
	document.images.colon.src=digitcolon.src;
	setTimeout("UpdateClock()",30000);

  }

   UpdateClock();
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<IMG SRC="digitblank.gif" border=0 name="hourstens"><IMG SRC="digitblank.gif" border=0 name="hoursones"><IMG SRC="digitblank.gif" border=0 name="colon"><IMG SRC="digitblank.gif" border=0 name="minstens"><IMG SRC="digitblank.gif" border=0 name="minsones"><IMG SRC="digitblank.gif" border=0 name="ampm">
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->