- 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. (eg; "dg8.gif" for the "8")
- For those of you looking for more, there are several variations:
- 24 Hour Version
- Time Zone offset version (change the tzOffset variable)
- Date version (date version can be combined with a time version)
Numbers to save: (or zip of files)
December 21, 2013 - 11:31am — Ralph
I want to place clocks at varying places with different tzoffsets. When I do the entire code, the first one reads the time when webpage first loads but does not run, the subsequent clocks just show all 8s.
December 21, 2013 - 8:45pm — ricocheting
Unfortunately what you are asking is harder than it sounds. The script would need to be significantly modified to support multiple sets of clock images. Right now if you add multiple clocks to the same page there are naming conflicts so the script doesn't know what images to change.
January 25, 2015 - 10:34am — Abhinav
Clock Not Working
I want to combine the date version with the time version. But everytime I try to do that only zeros show up.
You have said that we can combine both of them, but that's not working for me.
January 25, 2015 - 1:02pm — ricocheting
Answer: Combining onload events
You'll need to combine the two window.onload events. So replace time's:
January 25, 2022 - 10:44pm — Anwar
The code seems great ((THANKS)) How might I Change . .
I am interested in getting a bit more fancy. I would like to design my own .GIF files for date and change month number to :
How might I code this in to change date month numerical to my GIF word abbreviations?
I can name them
How might the coding change for this format. Can you please help me with the code. I will design the files when you reply.
January 27, 2022 - 3:18pm — ricocheting
You can check out the date version. But if you want text month, I'd do something like
<img src="dgjan.gif" name="month">
List your month images (I wouldn't bother pre-loading them):
var dgMonth = new Array("dgjan.gif","dgfeb.gif","dgmar.gif","dgapr.gif","dgmay.gif","dgjun.gif","dgjul.gif","dgaug.gif","dgsep.gif","dgoct.gif","dgnov.gif","dgdec.gif");
Then finally set the Image HTML src to the correct value from the above array. d.getMonth() gives you the current month starting with =january which is how it is stored in the above dgMonth array.
document.month.src = dgMonth[d.getMonth()];
June 25, 2015 - 2:03pm — Ted
Daylight Saving Time Support
How would support for Daylight Saving Time be added to the timezone example?
June 26, 2015 - 3:14pm — ricocheting
However, that still doesn't handle things like Arizona (with no DST) or countries other than the USA which run DST starting/ending on different dates.