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 1 of 18
1 2 3 4 > [last]
Facebookdel.icio.usDiggGoogle+TwitterLinkedIn
Bob Kuhnhenn (Westlake, OH, USA) wrote...
I've updated the FAQ (Frequently Asked Questions) page, which now has a search feature and several articles answering various issues/requests that have come up.

Admin:  What's with the thumbs down vote?  I guess you can't please everybody, oh well...

May 4, 2013 @ 11:52 PM EDT
Lorraine Pierce (USA) wrote...
There's a thumbs down bandit on every site it seems!
Personally...I give you 100 thumbs up to trump his 1 thumbs down Tongue
Thanks for the free counters!

November 21, 2013 @ 6:23 PM EST
blank calendar (Ha Nam, Vietnam) wrote...
Great countdown timer. Thank you.

October 29, 2016 @ 9:28 AM EDT
Jeff (Winneconne, WI, USA) wrote...
Is there a way to only count weekdays? so excluding weekends? or else a way to subtract "x" number of days would work too.

May 2, 2016 @ 2:22 PM EDT
joe bifano wrote...
Is it possible to have 1 countdown timer control a second countdown timer and that first countdown timer controls another script or calls it to work. If you set the first timer say for 6 hours (lights off for 6 hours) and it sends the command to a script (turns on lights) when it reaches 0. Then it starts another countdown timer for 16 hours (lights on) and when it reaches 0 turns off lights and starts the first timer again for 6 hours(lights off). What would I use to call the second javascript code for the second timer and what would I use to call the script?

May 1, 2016 @ 10:16 PM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Sorry for the delay in responding but I haven't had a chance to play around with it yet. I'm thinking you could just use one timer for both the lights on time and the lights off time countdowns based on this script:
http://www.rmkwebdesign.com/Countdown_Timers/Repeating_Daily_Timer.html which is linked from the FAQ at http://www.rmkwebdesign.com/Countdown_Timers/help/index.php?article=7
and you can call the script to turn the lights on or off in the part of the code when the timer reaches 0. I'll try to play around with it in the next day or two...

May 4, 2016 @ 4:50 AM EDT
Dennis (Honduras) wrote...
Hello,

I'm trying to build the countdown timer (1a) that count from 30 minutes to 0 minutes and repeat this for 24 times (example from 10pm to 10am)
Is there anyone who can help me with te code?

Thanks a lot!

March 21, 2016 @ 7:17 PM EDT
Darin (USA) wrote...
Great countdown timer. I got it to work on a standard HTML page, but when I try to use it within Wordpress I can't get the numbers to display. I tried the FAQ suggestions, but still no luck. Any other ideas?

February 22, 2016 @ 5:51 PM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Numbers are probably not showing up because the "onload="countdown(year,month,day,hour,minute)" event isn't in the <body> tag. I'd recommend to place the script for the timer at the very end of the body of your page (instead of within the <head> tags) and then add "countdown(year,month,day,hour,minute);" at the very end of the script, right after the last "}" and just before the closing "</script>" tag.

February 23, 2016 @ 4:28 PM EST
1 2 3 4 > [last]
Page 1 of 18

Add Comment