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 6 of 18
Facebookdel.icio.usDiggGoogle+TwitterLinkedIn
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Sorry for the delay in responding to your question, but I haven't had the time to play around with the code. It should not be too difficult to get the number of weeks left in the countdown, but getting the number of months left will be much more difficult since not every month has the same number of days in it. I'll work on getting the weeks left in the coming days (I'm going away to a conference for a week, so may or may not have time to work on this), but I think adding the months left is above my javascript abilities.

September 27, 2013 @ 10:56 PM EDT
Nicolas (Argentina) wrote...
Please update FAQ:
How do I change the code so that it does not show the number of days left?

with example of Digital theme.

Thanks

September 6, 2013 @ 10:26 AM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
I will try to work on it this weekend.

September 7, 2013 @ 2:01 AM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Done! Here is the direct link to the page: Display Digital Countdown Timer with No Days. There is also a link to that page from the FAQ article "How do I change the code so that it does not show the number of days left?"

September 9, 2013 @ 4:39 AM EDT
John (Compton, USA) wrote...
Hey there, Thanks for the countdown. I was wondering if it was possible to make the repeating daily countdown into an every 3 day repeating countdown? I'm willing to pay a fee for this, and I was also wondering if the daily repeating countdown was UTC or something, so that the countdown is the same for everyone? Because I really need that function. Thanks again.

July 31, 2013 @ 1:06 PM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Yes, I could modify the timer to count down to every third day. Regarding the daily repeating countdown, you can adjust the time zone setting so that it counts down to the time at your time zone as described up above, however, that can be modified if you want it to count down to a particular time based on the user's time zone (as opposed to your time zone).

August 1, 2013 @ 12:24 AM EDT
Pablo (Mar del plata, Argentina) wrote...
Thank you very much!!!, your work is very, very good!!.

Admin:  You're welcome!  Thank you for taking the time to comment.  I'm glad you found this helpful.

June 25, 2013 @ 12:29 PM EDT
John (Macedonia) wrote...
Hey, thanks for the countdown, I've been spending weeks trying to find something exactly like this! There's one concern, and that is if the client side timer is wrong, the countdown displays incorrectly, which causes a problem since at the end of my countown I display a value from a database, which can be easily cheated. Is there anyway to make the countdown be un-affected by a clients computer time? Thanks

June 6, 2013 @ 2:41 AM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Unfortunately, not with a JavaScript timer, since JavaScript is processed by the browser (and therefore the client's computer). PHP on the other hand is processed by the server, so you may want to look to see if there are any PHP based countdown timers, since that would be based on the server's clock. (I have not looked into making PHP based timers.)

June 6, 2013 @ 10:15 PM EDT
Page 6 of 18

Add Comment