JavaScript: A Countdown Timer for Dates

The 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 :)

2 thoughts on “JavaScript: A Countdown Timer for Dates”

    1. 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!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.