Click to See Complete Forum and Search --> : Countdown Clock/Help Please!


Abbe
05-16-2004, 11:00 AM
I know some Javascript, but I am not a whiz at it. I am trying to implement a countdown clock on my Web site for the participants in my contest. The script that I found has everything I need, but one thing is puzzling me and that is the y2k as you see below:

function getTime() {
now = new Date();
y2k = new Date("May 28 2004 18:00:00");
days = (y2k - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (y2k - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (y2k - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (y2k - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);
sec = (secondsRound == 1) ? " second." : " seconds.";
min = (minutesRound == 1) ? " minute" : " minutes, ";
hr = (hoursRound == 1) ? " hour" : " hours, ";
dy = (daysRound == 1) ? " day" : " days, "
document.timeForm.input1.value = "Time remaining: " + daysRound + dy + hoursRound + hr + minutesRound + min + secondsRound + sec;
newtime = window.setTimeout("getTime();", 1000);


I know it must have to be changed, but no idea what to change it to. A better explanation on sites for us non-programmers would sure be helpful! Can someone help please?

Thanks so much!!

Pittimann
05-16-2004, 11:52 AM
Hi!

I cannot see, what is wrong with "y2k"; do you just mean the variable's name because the script originally might have been designed to count down to the year 2000 a couple of years ago???

Provided that the form and the form field referred to in the script exist, it works properly. Can you please describe, what problem you have with it?

Cheers - Pit

Abbe
05-16-2004, 12:00 PM
Hi Pit!

Thanks for your reply. The script is not working for me with the date I put in, and I assume it has something to do with the y2k since that year has already passed? That's why I need to know if I am supposed to replace the y2k with something else, like the year 2004?

Abbe

Pittimann
05-16-2004, 12:05 PM
Hi!

In that script "y2k" is just the name of a variable, it could as well be "iLoveChocolate"; the script actually works. Are you sure, you have the required html as well? Here is an example with just a small modification to make it work also with a span instead of a form field:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function getTheTime() {
now = new Date();
y2k = new Date("May 28 2004 18:00:00");
days = (y2k - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (y2k - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (y2k - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (y2k - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);
sec = (secondsRound == 1) ? " second." : " seconds.";
min = (minutesRound == 1) ? " minute " : " minutes, ";
hr = (hoursRound == 1) ? " hour" : " hours, ";
dy = (daysRound == 1) ? " day" : " days, "
display="Time remaining: " + daysRound + dy + hoursRound + hr + minutesRound + min + secondsRound + sec;
document.timeForm.input1.value = display;
document.getElementById('withoutForm').innerHTML= display;
newtime = window.setTimeout("getTheTime();", 1000);
}
//-->
</script>
</head>
<body>
<form name="timeForm">
<input name="input1" size=65>
<input type="button" value="count down" onclick="getTheTime()">
</form>
<span id="withoutForm"></span>
</body>
</html>If you have further questions, please feel free to post again...

Cheers - Pit

autometer
08-12-2004, 05:09 PM
I needed a coutdown timer, so I did a search and found the script below. It works, but not exactally the way I want it to. Like Abbe I don't know very much about javascript. I can get in and follow along and make small mods to scripts to fit my needs usually. But I can't do much else.

When I used this script, it brought up an html page that had a text box and a button to click to start the count down. What I want is the countdown to start as soon as the person loads the page. The page also brings up two identical counters. One in the text box that was already there (I don't want this one) and one that just appears as text on the page that I do want.

So...I want the page to load with the counter already going and I want it to appears as text on the page and in the lower counter on this page.

Another small problem I have is that this works on Netscape and Explorer browsers ok, but on Safari (Apple's new browser) the time is not correct for some reason. Anyone know why?

Help will be much appreciated :D

autometer
08-12-2004, 05:22 PM
Wow, I made some typos...I thought I read the message as I wrote it, but I guess not very well.

This was the main question without typos:

I want the page to load with the counter already going. I want the counter to appear as text on the page as in the lower counter on this script.

Tim

javaNoobie
08-12-2004, 08:26 PM
I want the page to load with the counter already going
insert the function to onload to body tag

<body onload="getTheTime()">


I want the counter to appear as text on the page as in the lower counter on this script.

remove the line 'document.timeForm.input1.value = display;'
*edit: assuming the textbox's name is 'input1' and form name is 'timeForm'

autometer
08-13-2004, 04:40 PM
Thanks, it works.

I tried to insert an if statement that checked to see if days, hours, minutes, & sec are less than 0. If they are, I want the script to open a new web page. I thought I could insert a simple statement to have it do this for me. I tried it and it does not work. I tried placing it after the "//-->" and before "</script>" I also tried placing it before the "//-->" and if statement did not work.

Is my statement correct, and if so how can I make it work? Here is the statement I made.

if(days<0&&hours<0&&minutes<0&&seconds<0){
window.open("http://www.blablabla.com")
}

I was also asked to make the counter show milliseconds to try to make it look very accurate. I can see how the script is getting its time, well...milliseconds left. Then it subtracts the milliseconds off for a day, hours, minutes. But I have not been able to figure how to show 2 days, 5 hours, 3 minutes, 23 seconds, 148 milliseconds. Well, it will not display like that it would display like this
2 : 5 : 3 : 23 : 148

Then to have the milliseconds count down live unlike how the seconds and everything else are rounded off to the closest increment (hour, minute, second).

I know I ask alot, but this stuff was just pushed on me with 2 days to figure everything out while not knowing really knowing anything about javascript. The thing is, nobody here really understands how what they give me is really a big job even though it seems like I should just be able to put a timer on the site LOL. Well it wouldn't be quite the big job if I knew Javascript so I could just write and not have to search the web for a shareware javascript to modify.

Many thanks,
Tim

javaNoobie
08-14-2004, 01:16 AM
hi,


if(days<0&&hours<0&&minutes<0&&seconds<0){
window.open("http://www.blablabla.com")
}


your condition will not work as each variable cannot be <0. hence u shld change to


if(days==0&&hours==0&&minutes==0&&seconds==0)


*edit: not recommended to have milliseconds in any clock.

Abbe
08-22-2004, 09:59 AM
Originally posted by autometer
I needed a coutdown timer, so I did a search and found the script below. It works, but not exactally the way I want it to. Like Abbe I don't know very much about javascript. I can get in and follow along and make small mods to scripts to fit my needs usually. But I can't do much else.

When I used this script, it brought up an html page that had a text box and a button to click to start the count down. What I want is the countdown to start as soon as the person loads the page. The page also brings up two identical counters. One in the text box that was already there (I don't want this one) and one that just appears as text on the page that I do want.
So...I want the page to load with the counter already going and I want it to appears as text on the page and in the lower counter on this page.

Another small problem I have is that this works on Netscape and Explorer browsers ok, but on Safari (Apple's new browser) the time is not correct for some reason. Anyone know why?

Help will be much appreciated :D

Abbe
08-22-2004, 10:03 AM
Hi!

Try this code, it's working for me, plus you can donfigure it for whatever colors and size you .

function setcountdown(theyear,themonth,theday,thehour,themin,thesec){
yr=theyear;mo=themonth;da=theday;hr=thehour;min=themin;sec=thesec
}


setcountdown(2004,08,27,18,00,00)

var occasion="this round ends"
var message_on_occasion="This round has ended GOOD LUCK!"

var countdownwidth='425px'
var countdownheight='35px'
var countdownbgcolor='black'
var opentags='<font face="Arial font color=gold"><small>'
var closetags='</small></font>'



var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
var crosscount=''

function start_countdown(){
if (document.layers)
document.countdownnsmain.visibility="show"
else if (document.all||document.getElementById)
crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie
countdown()
}

if (document.all||document.getElementById)
document.write('<span id="countdownie" style="width:'+countdownwidth+'; background-color:'+countdownbgcolor+'"></span>')

window.onload=start_countdown


function countdown(){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
futurestring=montharray[mo-1]+" "+da+", "+yr+" "+hr+":"+min+":"+sec
dd=Date.parse(futurestring)-Date.parse(todaystring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
//if on day of occasion
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closeta gs)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+message_on_occasion+closetags
return
}
//if passed day of occasion
else if (dday<=-1){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+"Occasion already passed! "+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+"Occasion already passed! "+closetags
return
}
//else, if not yet
else{
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until "+occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until "+occasion+closetags
}
setTimeout("countdown()",1000)
}
</script>

<ilayer id="countdownnsmain" width=&{countdownwidth}; height=&{countdownheight}; bgColor=&{countdownbgcolor}; visibility=hide><layer id="countdownnssub" width=&{countdownwidth}; height=&{countdownheight}; left=0 top=0></layer></ilayer>
</center>

I hope it works for you.

Abbe

autometer
08-23-2004, 07:40 AM
Thanks, I do truely appreciate it :D

Tim