PDA

View Full Version : Javascript Countdown



runstill
02-14-2007, 03:39 PM
I've enrolled in a JavaScript class..and well, I'm having some problems figuring out why this countdown won't work..

Here is the external .js file:

function showDateTime(time) {
date = time.getDate();
month = time.getMonth()+1;
year = time.getFullYear();

second = time.getSeconds();
minute = time.getMinutes();
hour = time.getHours();

ampm = (hour < 12) ? " am" : " pm";
hour = (hour > 12) ? hour - 12 : hour;
hour = (hour == 0) ? 12 : hour;

minute = minute < 10 ? "0"+minute : minute;
second = second < 10 ? "0"+second : second;

return month+"/"+date +"/"+year+" at "+hour+":"+minute+":"+second+ampm;
}

function changeYear(today, holiday) {
year = today.getFullYear();
year = holiday.setFullYear(year);
year = (today > holiday) ? year + 1 : year
year = holiday.setFullYear(year)
}

function countdown(start, stop) {
time = stop - start;
days = Math.floor(time/1000*60*60*24);
hours = Math.floor(time/1000*60*60);
minutes = Math.floor(time/1000*60);
seconds = Math.floor(time/1000);
return days + " days," + hours + " hours," + minutes + " mins," + seconds + " secs";
}

here's the script embedded into the htm file:

<script type="text/javascript" src="dates.js"></script>
<script>
function showCountdown() {
var today=new Date("December 1, 2007 6:31:45");
var Date1=new Date("January 14, 2007 10:00:00");
var Date2=new Date("May 21, 2007 12:00:00");
var Date3=new Date("July 4, 2007 21:00:00");
var Date4=new Date("September 1, 2007 12:00:00");
var Date5=new Date("December 1, 2007 11:30:00");
var Date6=new Date("December 31, 2007 15:30:00");
document.eventform.thisDay.value = showDateTime(today);
changeYear(today, Date1);
changeYear(today, Date2);
changeYear(today, Date3);
changeYear(today, Date4);
changeYear(today, Date5);
changeYear(today, Date6);
document.eventform.count1.value = countdown(today, Date1);
document.eventform.count2.value = countdown(today, Date2);
document.eventform.count3.value = countdown(today, Date3);
document.eventform.count4.value = countdown(today, Date4);
document.eventform.count5.value = countdown(today, Date5);
document.eventform.count6.value = countdown(today, Date6);
}
</script>

The problem I'm having is that it's displaying NaN for the dates..so the problem is in the countdown function, but I don't really see why.

I'm sort of pathetic at this, so be gentle.

ahmad
02-14-2007, 04:34 PM
Well you are trying to subtract essentially 2 date objects from each other, which is undefined. Therefore, when you go time/x, its going to be 0/x, which is NaN in the IEEE standard.

So you can make your function look like this:

time = stop.getTime() - start.getTime();
returnDate = new Date();
returnDate.setTime(time);

return returnDate.getDate() + " days," + returnDate.getHours() + " hours," + returnDate.getMinutes() + " mins," + returnDate.getSeconds() + " secs";

------

You can shrink it a few lines possibly. Its untested, but should work.

runstill
02-15-2007, 12:21 PM
I figured out the problem, it was in the changeYear() function

it should look like this:

function changeYear(today, holiday) {
year = today.getFullYear();
holiday.setFullYear(year);
(holiday < today) ? ++year : year;
holiday.setFullYear(year);
}

So just some syntax errors.
Thanks for the help ahmad.

ahmad
02-15-2007, 03:03 PM
Weird.. so operators are overloaded in javascript and you can infact subtract dates? That would make it better than Java...

runstill
02-15-2007, 04:28 PM
Weird.. so operators are overloaded in javascript and you can infact subtract dates? That would make it better than Java...
Subtracting dates seems to work alright in javascript.

I know that javascript is quite a bit like C in many respects, but seeing as how I know nothing of normal Java, I cant comment on that.