I have a JavaScript countdown clock
right now it does text to tell the days, hours, min, sec until Christmas 2003 displaying on page.
I want to have another display on the same page which uses images
I have images for numbers which I have in a zip file
I want to make the clock so that the days, hours, min, and secs display with the images.
The Script
<HTML>
<HEAD>
<script language="JavaScript">
<!--// Hiding script from old browsers
var timerID;
var timerRunning = false;
var today = new Date();
var enday = new Date();
var secPerDay = 0;
var minPerDay = 0;
var hourPerDay = 0;
var secsLeft = 0;
var secsRound = 0;
var secsRemain = 0;
var minLeft = 0;
var minRound = 0;
var minRemain = 0;
var timeRemain = 0;
var decremain = 0;
var decround = 0;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function startclock () {
stopclock();
showtime();
}
function showtime () {
today = new Date();
enday = new Date("Dec, 25 2003 00:00");
enday.setYear("2003");
secsPerDay = 1000 ;
minPerDay = 60 * 1000 ;
hoursPerDay = 60 * 60 * 1000;
PerDay = 24 * 60 * 60 * 1000;
/*Seconds*/
secsLeft = (enday.getTime() - today.getTime()) / minPerDay;
decremain = (enday.getTime() - today.getTime()) / secsPerDay;
decround = Math.round(decremain);
decremain = decround + " seconds";
secsRound = Math.round(secsLeft);
secsRemain = secsLeft - secsRound;
secsRemain = (secsRemain < 0) ? secsRemain = 60 - ((secsRound - secsLeft) * 60) : secsRemain = (secsLeft - secsRound) * 60;
secsRemain = Math.round(secsRemain);
/*Minutes*/
minLeft = ((enday.getTime() - today.getTime()) / hoursPerDay);
minRound = Math.round(minLeft);
minRemain = minLeft - minRound;
minRemain = (minRemain < 0) ? minRemain = 60 - ((minRound - minLeft) * 60) : minRemain = ((minLeft - minRound) * 60);
minRemain = Math.round(minRemain - 0.495);
/*Hours*/
hoursLeft = ((enday.getTime() - today.getTime()) / PerDay);
hoursRound = Math.round(hoursLeft);
hoursRemain = hoursLeft - hoursRound;
hoursRemain = (hoursRemain < 0) ? hoursRemain = 24 - ((hoursRound - hoursLeft) * 24) : hoursRemain = ((hoursLeft - hoursRound) * 24);
hoursRemain = Math.round(hoursRemain - 0.5);
/*Days*/
daysLeft = ((enday.getTime() - today.getTime()) / PerDay);
daysLeft = (daysLeft - 0.5);
daysRound = Math.round(daysLeft);
daysRemain = daysRound;
/*Time*/
timeRemain = daysRemain + " days, " + hoursRemain + " hours, " + minRemain + " minutes, " + secsRemain + " seconds";
document.clock.face.value = timeRemain;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
if (daysRemain < 0) {
clearTimeout(timerID);
timerRunning = false;
document.clock.face.value = "Merry Christmas 2003 !";
}
}
// end hiding contents from old browsers
// --></script>
<TITLE>JavaScript Countdown Clock to Christmas 2003</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF onLoad="startclock();">
<CENTER><FONT SIZE=4 COLOR=#6600FF FACE="Arial"><B>Countdown to Christmas 2003</B></FONT>
<P><form name="clock" onSubmit="0">
<p><font color="#ff0000" face="Arial"><input type="text" size="36" name="face"></font></p>
</form>
</CENTER>
</BODY>
</HTML>
the zip file with numbers ... attachment
right now it does text to tell the days, hours, min, sec until Christmas 2003 displaying on page.
I want to have another display on the same page which uses images
I have images for numbers which I have in a zip file
I want to make the clock so that the days, hours, min, and secs display with the images.
The Script
<HTML>
<HEAD>
<script language="JavaScript">
<!--// Hiding script from old browsers
var timerID;
var timerRunning = false;
var today = new Date();
var enday = new Date();
var secPerDay = 0;
var minPerDay = 0;
var hourPerDay = 0;
var secsLeft = 0;
var secsRound = 0;
var secsRemain = 0;
var minLeft = 0;
var minRound = 0;
var minRemain = 0;
var timeRemain = 0;
var decremain = 0;
var decround = 0;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function startclock () {
stopclock();
showtime();
}
function showtime () {
today = new Date();
enday = new Date("Dec, 25 2003 00:00");
enday.setYear("2003");
secsPerDay = 1000 ;
minPerDay = 60 * 1000 ;
hoursPerDay = 60 * 60 * 1000;
PerDay = 24 * 60 * 60 * 1000;
/*Seconds*/
secsLeft = (enday.getTime() - today.getTime()) / minPerDay;
decremain = (enday.getTime() - today.getTime()) / secsPerDay;
decround = Math.round(decremain);
decremain = decround + " seconds";
secsRound = Math.round(secsLeft);
secsRemain = secsLeft - secsRound;
secsRemain = (secsRemain < 0) ? secsRemain = 60 - ((secsRound - secsLeft) * 60) : secsRemain = (secsLeft - secsRound) * 60;
secsRemain = Math.round(secsRemain);
/*Minutes*/
minLeft = ((enday.getTime() - today.getTime()) / hoursPerDay);
minRound = Math.round(minLeft);
minRemain = minLeft - minRound;
minRemain = (minRemain < 0) ? minRemain = 60 - ((minRound - minLeft) * 60) : minRemain = ((minLeft - minRound) * 60);
minRemain = Math.round(minRemain - 0.495);
/*Hours*/
hoursLeft = ((enday.getTime() - today.getTime()) / PerDay);
hoursRound = Math.round(hoursLeft);
hoursRemain = hoursLeft - hoursRound;
hoursRemain = (hoursRemain < 0) ? hoursRemain = 24 - ((hoursRound - hoursLeft) * 24) : hoursRemain = ((hoursLeft - hoursRound) * 24);
hoursRemain = Math.round(hoursRemain - 0.5);
/*Days*/
daysLeft = ((enday.getTime() - today.getTime()) / PerDay);
daysLeft = (daysLeft - 0.5);
daysRound = Math.round(daysLeft);
daysRemain = daysRound;
/*Time*/
timeRemain = daysRemain + " days, " + hoursRemain + " hours, " + minRemain + " minutes, " + secsRemain + " seconds";
document.clock.face.value = timeRemain;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
if (daysRemain < 0) {
clearTimeout(timerID);
timerRunning = false;
document.clock.face.value = "Merry Christmas 2003 !";
}
}
// end hiding contents from old browsers
// --></script>
<TITLE>JavaScript Countdown Clock to Christmas 2003</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF onLoad="startclock();">
<CENTER><FONT SIZE=4 COLOR=#6600FF FACE="Arial"><B>Countdown to Christmas 2003</B></FONT>
<P><form name="clock" onSubmit="0">
<p><font color="#ff0000" face="Arial"><input type="text" size="36" name="face"></font></p>
</form>
</CENTER>
</BODY>
</HTML>
the zip file with numbers ... attachment