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 7 of 18
Facebookdel.icio.usDiggGoogle+TwitterLinkedIn
Paul (UK) wrote...
Apologies I see that you ave covered this in older comments. I'll have a play tomorrow!

April 30, 2013 @ 2:35 PM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
As you've probably seen by now, the easiest way to get multiple timers on one page is to use iframes. You were close in figuring it out yourself though by changing the variable names and the function name, but a few more things needed to be changed which I've outlined here: Multiple Timers in One Page

April 30, 2013 @ 11:21 PM EDT
Sanman (Sydney, Australia) wrote...
Bob,

Thank u kindly for your help and time. Very pleased with the end result. Ur obviously very gifted with java scripting. All the very best - The Sanman.

Admin:  My pleasure, glad to be able to help!

April 12, 2013 @ 9:18 AM EDT
Sanman (NSW, Australia) wrote...
119 21 53 27, the numbers to the left would be ideal if they were spaced like that on my page. For some reason the 119+21 are joined together. Can they pls be spaced like the other 2? Thanking u in advance - The Sanman.

Admin:  Email sent with recommendations to restore the styling to the table holding the timer.

April 11, 2013 @ 12:28 AM EDT
Sanman (Sydney, Australia) wrote...
Bob,

Again, thank u kindly for the help and ur time. U r obviously very gifted with java scripting, with the end result very pleasing. I have no hesitation in putting credit on our page for your product. Wish u well - The Sanman.

Admin:  Thanks for your complement, but I'm not a professional coder, just self-taught hobby!

April 12, 2013 @ 9:15 AM EDT
David L Good (Spring, TX, USA) wrote...
First -- WOW!! Amazing material you've added for everyone to use. I've learned a lot from nothing more than looking through your sample code. Many thanks for that.

I'm working on a page for a non-profit that could benefit from your repeating countdown timer. They have activities happening at different times in six different time zones. I tried your weekly countdown timer (setting to New Zealand time, GMC+12, while I'm in Central US time) and it counted down just fine, but when it reached the end it started showing negative numbers (and counting up). Not sure if this is a bug, or not.

Also, do you have any samples (similar to what someone else requested) that turn everything into "ON AIR" when the countdown reaches zero for... two hours... and then resets to the countdown for the next week?

I don't make any money off this site (as I donate my time to non-profits) but am more than happy to donate to you, since you've given so much to the community. Even if you can't assist with what I'm doing, I'm very grateful for what you've done so far.


April 9, 2013 @ 2:11 PM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Fixed the time zone issues on the Repeating Weekly Timer. Thank you for bringing it to my attention. I enjoyed customizing it for your project!

April 12, 2013 @ 1:59 AM EDT
Ken Kaplan (Atlanta, USA) wrote...
Bob you are a pure genius. Thank you!

Admin:  Thanks Ken, it's been fun working with you on your website!

April 5, 2013 @ 6:09 PM EDT
Greg (France) wrote...
Hi, Thanks for sharing the code. I am looking for a way to add milliseconds with 3 decimals from 999 to 0

Admin:  Email sent with attachment containing full code to include milliseconds.

April 5, 2013 @ 5:47 PM EDT
Page 7 of 18

Add Comment