Samples of Countdown Timers

 

Style 1a

Style 2a

Style 2b

Style 1b

Style 3a

Style 3b

Digital

Countdown to a date & time with time zone setting

Below are samples and links to the JavaScript codes of a countdown timer in a variety of styles.  I first found a JavaScript code for a countdown timer at www.javascriptkit.com but it only counted down to a specified date, so I modified it to add the ability to countdown to a date and time, then modified it some more into the variety of styles that are sampled below.


This site provides instructions for inserting a countdown timer into your web page using either Apple's iWeb or other HTML editors.  For instructions if you are using iWeb'06 (version 1.0; part of iLife '06), click here; if you are using iWeb '08 (version 2.0; part of iLife '08) or iWeb ’09 (version 3.0; part of iLife ’09), click here.  To get instructions on how to insert the countdown timer code in another HTML editor, click here.


The code for the timer includes a time zone setting so that the countdown timer counts down to the date and time based on the time zone you select, not on the viewer’s time zone.  Without this setting, if I set the countdown target date to, for example, January 10 at 12:00pm, the timer would count down to that date and time at the time zone of the viewer.  In other words, I am in Cleveland, Ohio, USA (Eastern Time Zone) but if someone is in Sydney, Australia, then the countdown timer viewed from their computer in Sydney would countdown to Jan 10, 12:00pm Sydney time, not Cleveland time.  Now, with this new time zone setting it would count down to 12:00pm Cleveland time, regardles of where one is viewing it.  You are able to set the time zone that you want it to count down to in the script.

Style 1c

Style 1d

Google Chrome (Windows and Mac)

Internet Explorer 6 & greater (Windows)

FireFox 2.x & greater (Windows and Mac)

Safari 3.x & greater (Windows and Mac OS 10.4.9 and higher)

Note: the scripts for these timers have been tested and will show up and work appropriately on the browsers noted below.  These include Safari 3.x and greater on both a Mac running OS 10.4.9 and later, including Mac OS 10.5 (Leopard) through 10.8 (Mountain Lion), and a PC running Windows XP, Vista or Windows 7; FireFox 2.x and greater on Mac and Windows; Google Chrome on Mac and Windows; and Internet Explorer 6.0 and greater on Windows.

Feel free to e-mail me with any questions, comments, suggestions or to let me know of other browsers that either support or don't support the codes as shown.

Email Me

NOTE: if you are using iWeb '06 (version 1.x), see the instructions here.

 

Comments (177)

Page 11 of 18
Facebookdel.icio.usDiggGoogle+TwitterLinkedIn
Swapnil (Mumbai, India) wrote...
Hi,

The code you provided is fantastic :)

It saved a lot of time.

I just want to have a small help.

How to add when time zone is - 05:30

I tried -

var tz=+0530;
var tz=+05.30;
var tz=+05:30;
var tz=UTC+0530

But didnt working.
Kindly Guide.


November 27, 2012 @ 4:07 AM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
The timezone offset "5:30" is an offset of 5 hours and 30 minutes or 5 and one half hours; the variable "tz" in this countdown timer code is the timezone offset in hours only and will not recognize or understand the colon (:). The proper number to place in the code is actually 5.5 which is 5 and one half hours. So:

var tz=5.5;

November 27, 2012 @ 1:56 PM EST
Aamir (Punjab, Pakistan) wrote...
Hi there just like to say FANTASTIC & thank you so much for allowing us mere mortals to use your code.Smile
i have only one problem Chrome and ie shows NAN when in change hour 24 or sec 60
plzzz help

November 22, 2012 @ 2:35 AM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
The countdown timer will display "NAN" if the hour is set to 24 or minute is set to 60; the hour should range from 0 to 23 and minute should range from 0 to 59. Midnight would be noted as hour 0, minute 0; so for example, midnight of November 23 (between Nov 23 + 24) would be noted as month = 11; day = 24; hour = 0; minute = 0.

November 22, 2012 @ 3:31 AM EST
mark (manila, Philippines) wrote...
Sir can i ask the code 4 countdwn timer im beginer,could i ask 4 the whole set so i can study it?thank you

November 6, 2012 @ 10:19 PM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Just click on the links above to "get the code..." and you'll see the code for each style of the timers! I'm not sure what else you want...

November 7, 2012 @ 3:04 AM EST
KP (Barbados) wrote...
1B doesnt work in Safari for me , can you tell me what may be the problem

November 5, 2012 @ 9:35 AM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
I will need to see the source code of your web page with the timer to be able to try and figure out what the problem might be. Is your page online? If you could send me a link to your page, either by replying here or sending me an email (by clicking on the "Email Me" button above), I'll see what I can do.

November 5, 2012 @ 11:22 AM EST
James (Ireland) wrote...
Please, can anyone help me how to set 'Countdown Style 1B' twice in the same page? The one I have inserted is working just Perfect and once I insert second one in the bottom of the page, it doesn't show any numbers. Please, any help on it what I have to change? Many thanks!

October 7, 2012 @ 3:12 PM EDT
Page 11 of 18

Add Comment