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 16 of 18
Facebookdel.icio.usDiggGoogle+TwitterLinkedIn
Bob Kuhnhenn (Westlake, OH, USA) wrote...
I've modified style 1A to a weekly repeating timer, currently set to countdown to every Sunday at 8 AM EST; it resets itself once the target day and time is reached and begins counting down again to the next Sunday 8:00 AM. The target day, hour and minute can be modified within the script. See the following page for the example and details: http://www.rmkwebdesign.com/Countdown_Timers/Repeating_Weekly_Timer.html.

January 30, 2011 @ 2:14 AM EST
Sharon (Australia) wrote...
Hi

Thanks for sharing your clocks and code, I borrowed style 1D.

Can you please help me as i need to know a way to solve the below:
  1. Automatically repeat the clock daily
  2. Automatically change colour when it is 2hrs left and 1 hr left.

thanks
Wink

Admin:  corresponded via e-mail.

November 25, 2010 @ 12:55 PM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
I've changed the code to make a daily repeating timer (currently set to start each day at 8:00 AM and end at 5:00 PM, at 2 hours left the color of the numbers will change to yellow, then at 1 hour the color will change to red). See this page for complete details: http://www.rmkwebdesign.com/Countdown_Timers/Repeating_Daily_Timer.html.

January 30, 2011 @ 11:13 PM EST
Mark (Canada) wrote...
Hello, I need the timer to not show the days, but instead just the total HOURS + MINUTES + SECONDS.

So if there was over 3 days left, it would show:

75 Hours, 12 Minutes, 32 Seconds

Thank-you so much and I look forward to hearing your reply!

Admin:  e-mail reply was sent.

November 19, 2010 @ 6:23 PM EST
Q9 (USA) wrote...
How do I change the code so that it does not show the number of days left. I only want it to show the number of hours, minutes and seconds. Could you please email me how to do this. Thank you

Admin:  e-mail response was sent.

November 18, 2010 @ 4:26 AM EST
Lathon (KY, USA) wrote...
I really like your countdowns. How do I position one of them, like 1A or B, in an existing table?

Admin:  e-mail response was sent.

October 29, 2010 @ 3:32 PM EDT
Cliff Dailey (Detroit, MI, USA) wrote...
How do I change the code so that it does not show the number of days left. I only want it to show the number of hours, minutes and seconds. You can email me or explain here, which ever's easier.

Thanks alot

Cliff

Admin:  e-mail was sent with details.

October 19, 2010 @ 10:03 PM EDT
Lucas (Chile) wrote...
Hi
Great Script thanks for sharing. Is there any way to make the script run down from a fixed time i need to countdown from 54 hours to 0 hours ignoring days.

Please email the answer

thanks appreciate the help

Admin:  E-mail response was sent.

June 2, 2010 @ 1:04 PM EDT
Mariana Carter (UK) wrote...
Hi,

How do i get the countdown to count UP, I need the days SINCE an event, not the days until an event.
Thanks.


May 24, 2010 @ 6:26 AM EDT
Page 16 of 18

Add Comment