HTML Digital Clock for website


  • 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.


  1. Save the number images and stick them in the same directory as the page. (you can also download a zip file of everything)
  2. Copy and Paste the Source Code into your HTML page.
  3. 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")
  4. 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).

Source Code

Numbers to save: (or zip of files)


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);

How to align this clock in the top centre of the webpage....Since it is not contained into a textbox,m confused.I tried applying css but it's not helping...Need your Help

You can align it to the center by changing
<table cellpadding="5">to
<table cellpadding="5" align="center">
If you want it at the top of the page, you'll need to place the clock code first thing in the webpage code that controls that content.

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.

Unfortunately you won't be able to place multiple copies of this digital clock on the same page. The naming conflicts so the script doesn't know what images to change.

Good work. Is very usefuly for me.
I want to use two clocks for two different timezones on an intranet page using iframes but I need to set one of them don't use daylight saving time (summer time). Our computers use DTS.
How can I resolve this problem?


Using only Javascript there is no good way to tell if the time the browser is receiving is DST or not. It could be done by seeing if the current date falls within the date range DST runs during, but it would be messy and only accurate for a visitor viewing from the US and from a location that observes DST.