HTML Digital Clock for website

Description

HTML and Javascript code to create a digital clock on your website that will always display the current time on a page. Each digit for the 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

May 21, 2011 - 3:19am — danny@signit.com.au

Coding for 30 minute time different timezones

Tried to create a timezone that is not an hour different but 30 mins different. Any help with code please

Thanks Danny

May 22, 2011 - 8:56pm — ricocheting

Answer

You need to add the following line to make the clock 30 mins ahead:
d.setMinutes(d.getMinutes() + 30);If you want the time to be exactly 30 mins from whatever the local time is, add it right under
d = new Date();

if you're changing the "Time Zone offset version" you should add it right under this instead:
d.setHours(d.getHours() + tzOffset);

November 23, 2011 - 4:45pm — Anonymous

Thanks!

Hello! I was having the roughest time trying to find free digital-looking numbers, and was ecstatic when I finally found this site. Would you happen to be able to upload (or send to me) bigger images though? I need images around 48 X 72 pixels. Either way, I appreciate it.

November 24, 2011 - 8:49pm — ricocheting

Answer

I personally don't have any other digit images. But as long as the images have the same file names (eg; "dg8.gif" for the "8"), any images can be used.

January 6, 2012 - 1:17pm — mavr1c

Digital Numbers

Try this and see if these are scalable

http://blogs.msdn.com/b/xdesignsupport/archive/2008/04/18/digital-number...

February 14, 2012 - 8:26pm — Anonymous

need help

well, I try this attached to my website with php coding, and it works! :D but the problem is the table is expanded so large and didnt same as yours, is this because of my fault or maybe there's a relational to my css?
thanks

February 15, 2012 - 11:26am — ricocheting

Answer

Sounds right. You probably have some CSS that is setting the table or td cell width to 100%. Assuming your using the same size images, you should be able to go:
<table cellpadding="5" style="width:130px;"><td bgcolor="black" style="width:130px;">
and that should fix the problem.