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









