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 18 of 18
Facebookdel.icio.usDiggGoogle+TwitterLinkedIn
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Thanks for the compliments on the site! Smile

Getting rid of the time zone setting is one that I can easily answer—in the script, delete the following two parts of the code:

+(tz*1000*60*60)

which is part of the definition of the"var todaystring" and also delete

-(today.getTimezoneOffset()*(1000*60))

which is part of the definition of "var futurestring" so that you should have

var todaystring=Date.parse(todaystring1)

and

var futurestring=Date.parse(futurestring1);

left in the script. You can also delete the following line since that will no longer be needed:

var tz=


February 14, 2010 @ 8:51 PM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Over the past couple weeks, I've updated this site to include a time zone setting and instructions for inserting the countdown timer code using HTML editors other than Apple's iWeb. Feel free to ask questions or just leave a comment...

January 23, 2010 @ 12:20 PM EST
Jen (Los Angeles, CA, USA) wrote...
I need a countdown that only indicates the number of days remaining, how do I get rid of the hours, minutes and seconds?

March 5, 2009 @ 5:22 AM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
To have only the number of days remaining show up in the countdown timer, delete the lines in the code that refer to the hour, minute and seconds within the table tags. I've sent an e-mail to you with more details on how to do this.

March 5, 2009 @ 10:30 PM EST
Chris (Buffalo, NY, USA) wrote...
How do I get the countdown timer background to match the background on the website? Also, I am having problems making the usable space on my web page wider. I am using the latest version of iWeb and I am not sure if it is simply a limitation with the template that was picked. Great site! I am thankful that I can put a timer on mine.

March 4, 2008 @ 1:42 PM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Thanks for the compliments on the site! Looks like you got the countdown timer (style 1A) up on your site--it looks good! In style 1A, the background is transparent, so the website background should show through (I've checked your site on Safari and FireFox on my Mac, and it does show through). The background of the other styles can also be made transparent by changing the CSS code to "background: transparent;".

March 5, 2008 @ 2:34 AM EST
Page 18 of 18

Add Comment