JavaScript: A Countdown Timer for Dates
r3dux | March 20, 2010The mighty Shetboy’s heading down under to visit soon, so I thought I’d shove a JavaScript timer in the sidebar… There’s a lot of them out there, but the one I found didn’t work – so I fixed it.
Just shove this somewhere in the body section of a HTML document to see it work…
<script type="text/javascript"> <!-- Hide script from browsers with JavaScript disabled function countdownTimer(targetYear, targetMonth, targetDay, targetHour, targetMinute) { // Get the current date var currentDate = new Date(); currentYear = currentDate.getFullYear(); currentMonth = currentDate.getMonth(); // Convert the current date and target date into miliseconds. Because months start on 0 subtract 1 from target month. var currentMilliseconds = (new Date(currentYear, currentMonth, currentDate.getDate(), currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds())).getTime(); var targetMilliseconds = (new Date(targetYear, targetMonth - 1, targetDay, targetHour, targetMinute, 00)).getTime(); // Calculate the difference between the current date and target date in seconds var timeLeft = Math.round((targetMilliseconds - currentMilliseconds) / 1000); // If the time left is less than zero (i.e. the target date has arrived) cap it to zero if (timeLeft < 0) { timeLeft = 0; } // Work out days/hours/minutes/seconds var daysLeft = Math.floor(timeLeft / (60 * 60 * 24)); timeLeft %= (60 * 60 * 24); var hoursLeft = Math.floor(timeLeft / (60 * 60)); timeLeft %= (60 * 60); var minutesLeft = Math.floor(timeLeft / 60); timeLeft %= 60; var secondsLeft = timeLeft; // Add on plural suffixes (PS) where required var daysPS = 's'; var hoursPS = 's'; var minutesPS = 's'; var secondsPS = 's'; // Nix the plural suffix after any occurence of "1" if (daysLeft == 1) { daysPS = ''; } if (hoursLeft == 1) { hoursPS = ''; } if (minutesLeft == 1) { minutesPS = ''; } if (secondsLeft == 1) { secondsPS = ''; } // Create the HTML output var timerHTML = daysLeft + ' day' + daysPS + '<br />'; timerHTML += hoursLeft + ' hour' + hoursPS + '<br />'; timerHTML += minutesLeft + ' minute' + minutesPS + ' and<br />'; timerHTML += secondsLeft + ' second' + secondsPS + '!'; // Display the timer on the screen document.write(timerHTML); } // Run the function once every 1000 milliseconds (i.e. once per second) to update the clock. // *** THIS DOESN'T WORK - FUNCTION DOESN'T APPEAR TO BE CALLED AT PROVIDED INTERVAL =( *** //setInterval("countdownTimer(2010, 3, 27, 23, 0, 1)", 1000); // Just call the function once... At least that works. countdownTimer(2010, 3, 27, 23, 0, 1); // End of JavaScript--> </script>
I’m a bit disappointed that the setInterval call doesn’t work to update the clock ticking down each second… I think it’s something to do with the function scope and references (as discussed here), but I’ve tried wrapping a function around the “proper” function, and calling the proper function from the wrapper, where the wrapper is the one passed to setInterval, but still no dice…
Would be super appreciative if any JavaScript coders out there know how to fix this issue
No related posts.











Whoa! My very own countdown timer
Useful for me to check with too.
thx mr r3dux, am honoured!!
Hehe – no worries! Time is set for when you arrive here: roughly 11pm Sat 27th of March 2010 – but the time I mean is AU time (GMT+11), so when you run it from the UK it’s going to use your local PC clock on GMT, so it’s counting down to that time in GMT, and therefore will be 11 hours slow!
Just don’t miss your flight! =P
P.S. Can’t wait! 4 days and 7 hours till touchdown!