Digital Clock HTML for website

Description

You can use the following HTML code to create a digital clock on your website that will always display the current time on a page. This clock is image based.

Steps

Save the number images and stick them in the same directory as the page. (you can also download a zip file of everything)
Copy and Paste the Source Code into your HTML page.
You are welcome to use your own images for this. Just be sure the image names are the same as the ones used here.
For those of you looking for more, there is also 24 Hour Version and a Time Zone offset version (change the tzOffset variable), and a date version (date version can be combined with a time version).

dg0=new Image();dg0.src="dg0.gif";
dg1=new Image();dg1.src="dg1.gif";
dg2=new Image();dg2.src="dg2.gif";
dg3=new Image();dg3.src="dg3.gif";
dg4=new Image();dg4.src="dg4.gif";
dg5=new Image();dg5.src="dg5.gif";
dg6=new Image();dg6.src="dg6.gif";
dg7=new Image();dg7.src="dg7.gif";
dg8=new Image();dg8.src="dg8.gif";
dg9=new Image();dg9.src="dg9.gif";
dgam=new Image();dgam.src="dgam.gif";
dgpm=new Image();dgpm.src="dgpm.gif";

</script>

Numbers to save: (or zip of files)

JavaScript

Add new comment

Comments

June 29, 2010 - 9:48am — irishmonroe

Digital Clock - Creating letters

Really like what you have here. Do you also have the code to generate a digital letter or alphabet, looking specifically for 'GMT'

June 30, 2010 - 12:51pm — ricocheting

Answer

You can use the same technique I do to create any combination of characters. however, two things: (1) you'd need to create yourself an image for each character you want to use (eg; 'g.gif' 'm.gif' and 't.gif') and (2) you'd need the script to determine what the characters are you will be printing. but you can go like:

<img src="dg8.gif" name="letter1">
<img src="dg8.gif" name="letter2">
<img src="dg8.gif" name="letter3">

<script type="text/javascript">/*<![CDATA[*/
letter1 = 'g';
letter2 = 'm';
letter3 = 't';

// assuming 'g.gif' 'm.gif' and 't.gif' exist
document.letter1.src = letter1+'.gif';
document.letter2.src = letter2+'.gif';
document.letter3.src = letter3+'.gif';
/*]]>*/</script>

JavaScript