If you want to create a countdown timer for your website, you can do so with Javascript. But, there are some things you need to look out for concerning dates. Below is a code snippet for creating a Javascsript countdown timer.
$(document).ready(function() {
// set the date we're counting down to
// if the target date should be local to a user's time zone, e.g. the next new year,
// then just enter the date, e.g. "Jan 1, 2015 00:00:00"
// if the target date should be fixed to one time zone,
// e.g. for a live, online event that will take place at the same time regardless of a user's time zone,
// then enter the date in universal format, e.g. Apr 24, 2014 10:00:00 GMT-0700
// this example is for a target date that is on April 24, 2014 at 10 AM Pacific time (USA)
var target_date = new Date("Apr 24, 2014 10:00:00 GMT-0700").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
var timerId = setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// insert the time
$days.text(days);
$hours.text(hours);
$minutes.text(minutes);
$seconds.text(seconds);
}, 1000);
});
Everything is pretty straightforward except whether the target date should be relative to a user’s time zone or fixed to one time zone. For example, if you want to show the amount of time before the next new year, you’ll want to use the user’s local time zone since they will observe new year’s when it’s Jan 1 at 0:00 in their time zone where they’re located. In this case, you’d use the following string in the target_date line
Jan 1, 2015 00:00:00
The Javascript Date function will use the user’s time and time zone as specified in the user’s computer. My computer is set to PST (Pacific Standard Time) because I’m located in California where, in UTC format, I am 7 hours behind GMT (Greenwich Meridien Time) or UTC – 7. Below it shows UTC – 8 because of daylight savings, I think.
If I open a browser and in an inspector console I enter “new Date( )”, I can see what Javascript returns as my local date.
The time is a little off because it took some time for me to take this screenshot. Anyway, Javascript is reporting my date as Sun Apr 20 2014 22:30:51 GMT-0700 (Pacific Daylight Time). If I change my time zone to, say, Moscow, where the local time is Monday, April 21 at 9:40 AM or UTC+4 (4 hours ahead of GMT)
then if I rerun the Date() function in my browser, I’ll get the new Date in the Moscow time zone.
Notice how when I reran the command, I still got my current time in Pacific Standard / Daylight time. This is because my computer’s time and timezone information was already loaded in my browser’s memory. In order to pick up the updated time and time zone for Moscow, I have to launch a new browser window or tab.
That’s better. Now I’m seeing the correct time and time zone.
Now, since new years will be at a different time depending on where you are in the world, the countdown timer should show a different time depending on your location. To check that the countdown timer is showing the correct time, you can go to http://www.timeanddate.com/countdown/create and create a countdown timer to compare to. For example, the time until new years 2015 in San Francisco, California (PST) is
but the time until new years 2015 in Moscow is
Now, if you want to create a countdown timer to a fixed time regardless of a user’s time zone, you need to specify UTC (Universal) time in the Javascript Date( ) function. For example, if the countdown date will be to a live online event that will occur at Apr 24, 2014 10 AM Pacific Standard Time (in California), then you’d use the UTC / GMT format as follows in the target_date line.
Apr 24, 2014 10:00:00 GMT-0700
This way, the countdown time will always count the amount of time from any location to Apr 24, 2014 10:00:00 GMT-0700 which will always be the same amount of time regardless of what time zone someone is in (or what time zone you set your computer to).