PDA

Click to See Complete Forum and Search --> : JavaScript countdown clock

2 peachy
03-15-2003, 06:03 PM
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
Jona
03-15-2003, 06:45 PM
It runs in a form. If you used document.write() to write it to the page, it would only work for one second, because the page would be wiped out after it wrote to the page after the page had finished loading.
2 peachy
03-15-2003, 07:03 PM
ok... have this script.... can I modify it to include a text version of the days, hours, minutes, seconds til Christmas 2003

preferably above the image one ?

this script is working with the images now...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function getTime() {
c1 = new Image(); c1.src = "1c.gif";
c2 = new Image(); c2.src = "2c.gif";
c3 = new Image(); c3.src = "3c.gif";
c4 = new Image(); c4.src = "4c.gif";
c5 = new Image(); c5.src = "5c.gif";
c6 = new Image(); c6.src = "6c.gif";
c7 = new Image(); c7.src = "7c.gif";
c8 = new Image(); c8.src = "8c.gif";
c9 = new Image(); c9.src = "9c.gif";
c0 = new Image(); c0.src = "0c.gif";
Cc = new Image(); Cc.src = "Cc.gif";
now = new Date();

//ENTER BELOW THE DATE YOU WISH TO COUNTDOWN TO
later = new Date("Dec 25 2003 0:00:01");

days = (later - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (later - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (later - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (later - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);

if (secondsRound <= 9) {
document.images.g.src = c0.src;
document.images.h.src = eval("c"+secondsRound+".src");
}
else {
document.images.g.src = eval("c"+Math.floor(secondsRound/10)+".src");
document.images.h.src = eval("c"+(secondsRound%10)+".src");
}
if (minutesRound <= 9) {
document.images.d.src = c0.src;
document.images.e.src = eval("c"+minutesRound+".src");
}
else {
document.images.d.src = eval("c"+Math.floor(minutesRound/10)+".src");
document.images.e.src = eval("c"+(minutesRound%10)+".src");
}
if (hoursRound <= 9) {
document.images.y.src = c0.src;
document.images.z.src = eval("c"+hoursRound+".src");
}
else {
document.images.y.src = eval("c"+Math.floor(hoursRound/10)+".src");
document.images.z.src = eval("c"+(hoursRound%10)+".src");
}
if (daysRound <= 9) {
document.images.x.src = c0.src;
document.images.a.src = c0.src;
document.images.b.src = eval("c"+daysRound+".src");
}
if (daysRound <= 99) {
document.images.x.src = c0.src;
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
if (daysRound <= 999){
document.images.x.src = eval("c"+Math.floor(daysRound/100)+".src");
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
newtime = window.setTimeout("getTime();", 1000);
}
// End -->
</script>

</HEAD>

<BODY onLoad="getTime()">
<div align="center">
<h3>Countdown to Christmas (2003)</h3>
</div>

<center>
<table><tr><td bgcolor="black" valign="bottom">
<img height=21 src="0c.gif" width=16 name=x>
<img height=21 src="0c.gif" width=16 name=a>
<img height=21 src="0c.gif" width=16 name=b>
<img height=21 src="Cc.gif" width=9 name=c>
<img height=21 src="0c.gif" width=16 name=y>
<img height=21 src="0c.gif" width=16 name=z>
<img height=21 src="Cc.gif" width=9 name=cz>
<img height=21 src="0c.gif" width=16 name=d>
<img height=21 src="0c.gif" width=16 name=e>
<img height=21 src="Cc.gif" width=9 name=f>
<img height=21 src="0c.gif" width=16 name=g>
<img height=21 src="0c.gif" width=16 name=h>
</td></tr></table>
</center>

<div align="center">
<h4>(Days : Hours : Minutes : Seconds)</h4>

</body>
</html>
Jona
03-15-2003, 07:55 PM
I don't understand what your problem is. Are you having trouble with running both functions at the same time?
2 peachy
03-15-2003, 08:04 PM
I am not sure how to get both functions on the same page.
do I have to write two scripts ... one for each function...
or can I modify this script to do both functions... and if I can... how do I do it ?
peachy
Jona
03-15-2003, 08:21 PM
The following will put both on the same page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function getTime() {
c1 = new Image(); c1.src = "1c.gif";
c2 = new Image(); c2.src = "2c.gif";
c3 = new Image(); c3.src = "3c.gif";
c4 = new Image(); c4.src = "4c.gif";
c5 = new Image(); c5.src = "5c.gif";
c6 = new Image(); c6.src = "6c.gif";
c7 = new Image(); c7.src = "7c.gif";
c8 = new Image(); c8.src = "8c.gif";
c9 = new Image(); c9.src = "9c.gif";
c0 = new Image(); c0.src = "0c.gif";
Cc = new Image(); Cc.src = "Cc.gif";
now = new Date();

//ENTER BELOW THE DATE YOU WISH TO COUNTDOWN TO
later = new Date("Dec 25 2003 0:00:01");

days = (later - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (later - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (later - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (later - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);

if (secondsRound <= 9) {
document.images.g.src = c0.src;
document.images.h.src = eval("c"+secondsRound+".src");
}
else {
document.images.g.src = eval("c"+Math.floor(secondsRound/10)+".src");
document.images.h.src = eval("c"+(secondsRound%10)+".src");
}
if (minutesRound <= 9) {
document.images.d.src = c0.src;
document.images.e.src = eval("c"+minutesRound+".src");
}
else {
document.images.d.src = eval("c"+Math.floor(minutesRound/10)+".src");
document.images.e.src = eval("c"+(minutesRound%10)+".src");
}
if (hoursRound <= 9) {
document.images.y.src = c0.src;
document.images.z.src = eval("c"+hoursRound+".src");
}
else {
document.images.y.src = eval("c"+Math.floor(hoursRound/10)+".src");
document.images.z.src = eval("c"+(hoursRound%10)+".src");
}
if (daysRound <= 9) {
document.images.x.src = c0.src;
document.images.a.src = c0.src;
document.images.b.src = eval("c"+daysRound+".src");
}
if (daysRound <= 99) {
document.images.x.src = c0.src;
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
if (daysRound <= 999){
document.images.x.src = eval("c"+Math.floor(daysRound/100)+".src");
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
newtime = window.setTimeout("getTime();", 1000);
}
// End -->
</script>
<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>

</HEAD>

<BODY onLoad="getTime();startclock();">
<P><form name="clock" onSubmit="0">
<p><font color="#ff0000" face="Arial"><input type="text" size="36" name="face"></font></p>
</form> <BR><BR>
<div align="center">
<h3>Countdown to Christmas (2003)</h3>
</div>

<center>
<table><tr><td bgcolor="black" valign="bottom">
<img height=21 src="0c.gif" width=16 name=x>
<img height=21 src="0c.gif" width=16 name=a>
<img height=21 src="0c.gif" width=16 name=b>
<img height=21 src="Cc.gif" width=9 name=c>
<img height=21 src="0c.gif" width=16 name=y>
<img height=21 src="0c.gif" width=16 name=z>
<img height=21 src="Cc.gif" width=9 name=cz>
<img height=21 src="0c.gif" width=16 name=d>
<img height=21 src="0c.gif" width=16 name=e>
<img height=21 src="Cc.gif" width=9 name=f>
<img height=21 src="0c.gif" width=16 name=g>
<img height=21 src="0c.gif" width=16 name=h>
</td></tr></table>
</center>

<div align="center">
<h4>(Days : Hours : Minutes : Seconds)</h4>

</body>
</html>
Nedals
03-15-2003, 08:42 PM
Hi! 2 peachy

Ready to work!!

// Put you image names into an array
imgNames = new Array('0.gif','1.gif','2.gif', .... ,'9.gif','blank.gif');
// preload the images
for (i=0, i<10, i++) { imgAry[i]=new Image(); imgAry[i].src=imgName[i] }

// Now for the interesting part...
// You need to get the digits of the number, in the right order, and then build the images.
digitAry = (days+"").split(''); // gets the digits. If a digit is not there (23 days has no 100's) you get undefined for that digit
// Why the (days+"")? WE need to convert the number to a string
digitAry.reverse(); // this is used to keep the digit positions.
// I've left the alert so you can see what happens if you take out the reverse() (and change the [x] order)
alert(digitAry[2]+" | "+digitAry[1]+" | "+digitAry[0]);
for (i=0; i<3; i++) {
if (digitAry[i]) { document.images['dayimg'+i].src = imgNames[digitAry[i]); }
else { document.images['dayimg'+i].src = imgNames[10]); // a blank image
}

In HTML..
<img name="dayimg2" src=""><img name="dayimg1" src=""><img name="dayimg0" src="">

// Repeat for hours, minutes and seconds using i<2

Hopefully that should be enough for you to complete it. :)
Post back if you get in trouble.
2 peachy
03-15-2003, 08:54 PM
ok... got it working now... thankyou very much for all your help...
now have one more part...
have images :, am, pm

how do I get the text and the images to display the time of day too

example

230 days, 12 hours, 32 minutes, 15 seconds : am
or pm
depending upon the time of day it is ???

peachy