1. Technology

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/blcount1.htm

was emailed to:

Thanks for sharing About.com with others!

Countdown Timer

1. Introduction and Sample

More of this Feature

Timer Script

This is a countdown timer with a difference. It doesn't just display 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. 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 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 that you want it to apply to the time you are counting down to so as to save you the effort of adjusting the time that you enter to UTC.

The script is quite flexible too. 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 you specify and keep adding days until it gets to the day of the week specified.

The hour should be specified in "military time" (ie. between 0 and 23) to indicate the time of day that the offer expires. 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. 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. By simply replicating a piece of the code and specifying different ids you can have multiple countdowns in the same page.

The following are some examples of combinations you may find useful.

  • To countdown to the end of each month - month = '*', day = '1', dow = 0, hour = 0
  • To countdown to the 21st of each month - month = '0', day = '21', dow = 0, hour = 0
  • To countdown to the end of each day - month = '0', day = '+1', dow = 0, hour = 0
  • To countdown to noon tomorrow - month = '0', day = '+1', dow = 0, hour = 12
  • To countdown to 4pm today - month = '0', day = '+0', dow = 0, hour = 16
  • To countdown to Christmas - month = '12', day = '25', dow = 0, hour = 0
  • To countdown to the noon on the first Friday of each month - month = '*', day = '1', dow = 6, hour = 12
  • To countdown to the noon on the fourth Monday of each month - month = '*', day = '22', dow = 2, hour = 12

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 approximately once a second so as to minimize the amount of processing required to recalculate the values to be displayed.

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).

Time Remaining -

So if you want a countdown timer like this for your web site you need to download and install the script.

©2014 About.com. All rights reserved.