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. (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)

function dotime(){ 
	var d=new Date();
	var hr=d.getHours(),mn=d.getMinutes(),se=d.getSeconds();

// set AM or PM
	document.ampm.src=((hr<12)?dgam.src:dgpm.src);

// adjust from 24hr clock
	if(hr==0){hr=12;}
	else if(hr>12){hr-=12;}

document.hr1.src = getSrc(hr,10);
	document.hr2.src = getSrc(hr,1);
	document.mn1.src = getSrc(mn,10);
	document.mn2.src = getSrc(mn,1);
	document.se1.src = getSrc(se,10);
	document.se2.src = getSrc(se,1);
}

function getSrc(digit,index){
	return dg[(Math.floor(digit/index)%10)].src;
}

window.onload=function(){
	dotime();
	setInterval(dotime,1000);
}

</script>

Numbers to save: (or zip of files)

JavaScript

Add new comment

Comments

December 21, 2013 - 11:31am — Ralph

Multiple clocks

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

Answer

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:

window.onload=function(){
	dotime();
	setInterval(dotime,1000);
}

and the date's

window.onload=function(){
	dodate();
	setInterval(dodate,30000);//30 secs
}

by combining them into a single:

window.onload=function(){
	dotime();
	setInterval(dotime,1000);

	dodate();
	setInterval(dodate,30000);//30 secs
}

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 :

JAN
FEB
MAR
APRL
MAY
JUN
JUL
AUG
SEPT
NOV
DEC

How might I code this in to change date month numerical to my GIF word abbreviations?

I can name them
dgjan.gif,
dgfeb.gif,
dgmar.gif
"
"
"

How might the coding change for this format. Can you please help me with the code. I will design the files when you reply.

Respect, Anwar

January 27, 2022 - 3:18pm — ricocheting

Text month

You can check out the date version. But if you want text month, I'd do something like
Image HTML:

<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 [0]=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

Answer: DST

There is sadly no good way to determine DST status with only JavaScript. The best way is a "is the day-of-year within this range" type of check and then add an additional hour.

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.