Countdown Timer

This countdown timer is somewhat different from many of the others. Instead of displaying the time remaining until the clock on your visitor's computer reaches a specified date and time it counts down until a specific date and time is reached at the page author's location instead. So I am in Sydney, Australia (timezone +10) so if you are located in New York, USA (timezone -5) then the countdown timer will show 15 hours less than you would expect there to be until the specified time because the timer is counting down to that time in Sydney, not to that time in New York.

The script can do this because it both takes into account the timezone offset of your visitor's computer and also allows you to specify the timezone offset to be applied to the time you are counting down to.

The script is very flexible as well. The month can be specified as a number between 1 and 12 to indicate which month of the year that you are counting down to (it will assume next year if the month has already past for this year) or you can specify '*' to have the counter select the appropriate date within the next month. If you do specify a numeric month then the countdown will stop once it reaches zero with a "Too Late" message but if it is set to monthly then it will automatically restart the countdown for the next month (but only if the page is reloaded). You can also set the month to '0' which will always be matched to the current month.

The day can be specified as a given day of the month (1 through 31) or you can put a + in front of a number to indicate so many days in the future (useful for "limited time offers" that never expire). You can even specify '+0' to countdown to a specific time each day.

If you want a specific day of the week rather than a specific date then simply set the day of the month to the earliest day of the month that you want and then set the dow field to indicate the day of the week that you want that is on or immediately after that day. The day of the week should be set to a number with 1 representing Sunday and 7 representing Saturday. Set dow to 0 if you don't want a specific day of the week. If you do specify a day of the week then it will start from the day of the month that you specify and keep adding days until it gets to the day of the week specified.

The hour should be specified using a 24 hour clock (ie. between 0 and 23) to indicate the time of day that the offer expires. So for 12am specify zero and for pm times add 12 to the hour. Minutes can also be specified if you need to count down to a time that isn't an exact hour.

The timezone offset is also specified in hours and should be the number of hours that your local time is ahead (positive number) or behind (negative number) Universal Coordinated Time (UTC also known as GMT or zulu time). The timezone can include fractions of an hour if necessary (to allow for those timezones on the half hour (for example for Adelaide, Australia you would specify 9.5). You would only need to adjust the timezone if you want to take daylight saving at your location into account.

The script also allows an id to be specified to identify where the countdown is to display in the page. Also by simply replicating the piece of the code that defines the timer and specifying different ids you can have multiple countdowns in the same page.

The latest version of the script is also written to be as unobtrusive as possible. Only the ids that you specify to display the countdowns in must be specified in the HTML and the script also creates only one global variable in JavaScript (so as to make it easier to either place the timer definitions in a separate file or to include multiple countdowns in the same page without needing to repeat the entire script.

The following are some examples of combinations you may find useful for defining countdown timers.

The amount of time remaining on the counter is only calculated once when the web page is loaded. After that the count is reduced by 1 once a second so as to minimize the amount of processing required to recalculate the values to be displayed. As there is a small amount of code to be run before each one second delay the timer may end up out by a small amount if someone leaves their browser open displaying the timer for several hours.

Here is what the output looks like if we are counting down the time remaining until the end of the month at my location (Sydney, Australia) without correcting for daylight saving.

Time remaining -

To add this script to your web page simply copy the script into a separate JavaScript file and then attach that file into your web page by placing a script tag immediately before the </body> tag.

JavaScript

Next you need to update the settings for the timer to define when you want it to countdown to and which id in the page you want to display the result. The code where you need to update the values looks like this (note that you should not change the top two or bottom two lines):

(function(c) {
var month, day, dow, hour, min, tz, lab;
month = '*';  // 1 through 12 or '*' within the next month, '0' for the current month
day = '1';      // day of month or + day offset
dow = 0;      // day of week sun=1 sat=7 or 0 for whatever day it falls on
hour = 0;     // 0 through 23 for the hour of the day
min = 0;       // 0 through 59 for minutes after the hour
tz = 10;         // offset in hours from UTC to your timezone
lab = 'cd';     // id of the entry on the page where the counter is to be inserted
c(month,day,dow,hour,min,tz,lab);
})(countdown);

Repeat this section if you want multiple countdowns to display in the same page. The value you provide in the lab variable is the id associated with the element in the web page where you want to display the countdown so if that doesn't already exist in the HTML then you will need to add it - for example:

<span id="cd"></span>

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate