Localized Javascript countdown

These days many websites use a simple Javascript countdown clock to help promote the launch of a new service. Because many web applications are international, it’s important to ensure that your countdown is localized for all visitors.

Let me give you an example. Say you’re in Portland, OR and you’re launching a new web app on April 27, 2011 at 5:00 p.m. PST. Not only are you launching a new web service, but you’re also coordinating an iOS and an Android app launch. So it’s important to be precise. You want to ensure your Hong Kong visitors don’t expect your product to be launching at 5:00 p.m. HKT. Instead, you want them to know that your product is actually launching at April 28, 2011 at 8 a.m. local time.

One good way to do this is using the Date.UTC Javascript method.

// Get the current local time
var now = new Date();
 
// Get the localized end date for your countdown
var end = new Date(Date.UTC(
    2037, // Year
    3-1,  // Month (0 is January, so 3 minus 1 is 2, which is March)
    31,   // Day
    19,   // Hour
    0,    // Minutes
    0,    // Seconds
    0     // Milliseconds
));
 
// Toggle countdown
if (now < end) {
    // Show countdown
    alert(now + " < " + end);
} else {
    // Yay! We launched!
    alert('Launch day!');
}

If you run the script above, you’ll notice that while now is always increasing, end should stay constant. The only reason the value of end should change is if you change your computer’s local timezone.

You can now take these variables and pass them into a nice Javascript countdown script. I’ve used Keith Wood’s jquery.countdown.js jQuery plugin in the past, but I leave that decision up to you.