Also interesting

Error. Page cannot be displayed. Please contact your service provider for more details. (13)

Javascript countdown timer

display time with timezone for your visitors

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.

The hour should be specified in "military time" (ie. between 0 and 23) to indicate the time of day that the offer expires. 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). You would only need to adjust the timezone if you want to take daylight saving at your location into account.

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

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 - 20 days + 9 : 44 : 25

To add the countdown script to your web page you first need to download JS source code here: cnt.js

Amend the values for month, day, hour, and tz to reflect the date/time at your location to which you want the countdown timer to count down. You can also amend the start function if required to handle other onload functioning for your page.

You next link it into the head of your page using the following code:
<script type="text/javascript" src="cntt.js"></script>

The final step is to add the following code into the body of your web page where you want the countdown to be displayed: <span id="cd"></span>

If you need to change the id associated with the countdown timer simply change the value from cd to your required value in both the span tag and the lab variable at the top of the script.

Or, you can Get professional timer script here.