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 14 of 18
Facebookdel.icio.usDiggGoogle+TwitterLinkedIn
Brian Sutherland (Santa Barbara, CA, USA) wrote...
Hi, great counter website! I wanted to see if you could help me?

We want to have an hourly countdown counter that resets every hour.

Our application is an hourly sale we want to run on our site, every hour a new sale starts. We would like to include a timer on the site that counts down from 60 minutes and resets once done for another countdown from 60.

Any ideas on this?

Thanks in advance,

Brian Laugh

Admin:  corresponded via email.

November 15, 2011 @ 7:41 PM EST
Perks (USA) wrote...
Am going to try this out. Thanks so much. Do you think it will easily work in a blogspot or wordpress blog?

Was thinking about a timer in each post and doing a groupon style offer.

Admin:  I'm not familiar with either blogspot or wordpress, so I don't know how to incorporate the script in them.

September 20, 2011 @ 2:21 AM EDT
online (Bulgaria) wrote...
Hello there,
I was wondering how may i edit the script so i can use it multiple times on the same page. For example if i want to start 10 different countdowns with different time on the same page.
Right now if i do so it show only the first one display.
Thank you for all your help in advance.

Admin:  The only way I can think of right now to display multiple countdown timers displaying different times on the same page is to use iFrames.  Create a single html page for each countdown timer, then on the main page, include each of the timers in a different iFrame.

September 19, 2011 @ 12:10 PM EDT
rob (California, USA) wrote...
Hello! Desperately need some help with the countdown clock. Laugh

The site I am working with is in CSS format and i have not a clue where to insert the code for the clock. Can anyone help?

Admin:  corresponded via email.

August 25, 2011 @ 1:14 AM EDT
JJ (England) wrote...
The numbers on the countdown do not display on IE 8.

Works fine in IE 9, Chrome, Firefox. Is there a code fix for this? Thanks.

Admin:  I've not noticed the problem in IE8.  I've tested it in IE6, IE7 & IE8 and all work as expected.  I'm curious if others are having a problem seeing the numbers of the countdown timer in IE8 as well.

July 22, 2011 @ 10:10 AM EDT
Roland (New Rochelle, NY, USA) wrote...
Amazing scripts! How could I add milliseconds to this counter? I tried but failed while following your code structure! Any help greatly appreciated!

Admin:  Details to include milliseconds were e-mailed.

May 22, 2011 @ 6:52 PM EDT
Aniruddha (India) wrote...
Hi..
This is an excellent timer.I've borrowed 1B.I want to use it in my project "Online Examination" on the exam page.My query is that if it is possible that when the timer reaches to zero the page will be submitted automatically?The page contains some radio buttons & the value is needed for further calculation.There is an option in may page "Submit",for normal use,but if the time expires i want to submit the page automatically.Waiting for your reply.This is an emergency..Thank you..

April 28, 2011 @ 5:48 AM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Yes, it is possible to do that. I assume that by submit page, you mean that you have a form on your page that will be submitted. In that case, just add this line:

document.forms["myForm"].submit();

(where "myForm" is the name of your form) after the following line in the countdown timer code:

if(dday<=0&&dhour<=0&&d min<=0&&dsec<=0){

April 28, 2011 @ 6:11 AM EDT
Aniruddha (India) wrote...
Hi..
Sorry to bother you again.Thanx for the last answer.The solution worked.I've some more query.As mentioned earlier I've borrowed style 1B and using in my project "Online Examination",i want to use it in a link where the link loads three different pages at 3 different time,depends on the timer,like-if time left is 6 hour,it loads page1,if its 4 hours,it loads page 2 and so on..Is it possible??
pls help me..Thank you..

April 28, 2011 @ 7:53 AM EDT
Page 14 of 18

Add Comment