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 8 of 18
Facebookdel.icio.usDiggGoogle+TwitterLinkedIn
Patrick (Milan, Italy) wrote...
Hello, it all worked well, but now with IE 10 it doesn't work anymore, the seconds are static.

How we could solve this problem ? What are the changes to be done ?

Thank you


March 18, 2013 @ 9:30 AM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Could you send me a link to or a copy of the source code of the page with the countdown timer that is not working for you in IE 10? I just tested the timers on this site on IE 10 (for Windows 7) and all work as they should.

March 18, 2013 @ 11:57 PM EDT
gandhi (chennai, India) wrote...
how to integret with progress bar

March 15, 2013 @ 3:46 AM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Unfortunately, that is beyond my knowledge of javascript.

March 15, 2013 @ 8:09 AM EDT
Ken (Atlanta, USA) wrote...
Is there a code I could get to light up an on air light on my Talk Radio website Conservative Talk Radio directory if the day and time is placed in the code. The idea is to use a tiny light to indicate a show is currently on air.

March 12, 2013 @ 11:35 PM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Yes, one could use a variation of either the Repeating Daily Timer or the Repeating Weekly Timer, depending on whether you are on air every day or just once a week. You can contact me by email (click email link up higher in this page) with more details (such as the day[s] of the week and times you are on air), and I can work on tweaking the code for you.

March 13, 2013 @ 2:23 AM EDT
Russell Luna (Alvin, TX, USA) wrote...
Do you build timers for course content. I am having a website built to offer online class, similar to driver ed. The student needs to spend a pre-determined amount of time in front of the computer. The person building the site now is having a difficult time finding this program but I know its out there because I've seen "competitors,"

March 5, 2013 @ 1:43 PM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
No, unfortunately I have not done that. I think it would depend on what code was used to make the test, such as ASP or PHP, etc.

March 5, 2013 @ 2:03 PM EST
Dennis (UK) wrote...
Hey, first at all great work!
Ive got a problem with the timezones. Im using your script, but the countdown timer is different for my friends in different timezones. For example: Countdown is at 12h left for my, but for my friend its 18h left. ope you can help :)

March 2, 2013 @ 8:51 AM EST
Page 8 of 18

Add Comment