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 9 of 18
Facebookdel.icio.usDiggGoogle+TwitterLinkedIn
Sel wrote...
I have been looking everywhere for something exactly like this! Thanks so much for sharing!

Is there anyway to resize the timers? I'm using the Style 1A weekly reset timer but it's a little too big for my forum.


January 25, 2013 @ 3:53 PM EST
Sel wrote...
Nvm I got it to work! Thanks so much for this amazing code!

January 25, 2013 @ 4:52 PM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Thanks for the compliment and I'm glad you were able to figure it out; basically one can change the size by changing the values of the CSS properties that affect the size of the table, numbers, etc.

January 26, 2013 @ 12:09 AM EST
Jodee (Boulder, CO, USA) wrote...
First, Thank you so much for making your site so user friendly! I am having a problem with the numbers showing up though. My website is in wordpress and I use IE9. All that shows are little black boxes with no title and no countdown numbers. The words "days, hours, seconds" do appear. Any help you can offer would be greatly appreciated!Grin

January 16, 2013 @ 7:12 PM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Thanks for your comment! I'm not familiar with WordPress, as I've not used it, but it is possible that the numbers are not showing up because the script for the timer is not loading due to the onload event not being recognized. Try placing the script for the timer after the HTML code for where the timer is placed, then add the following line just before the closing </script> tag:
countdown(year,month,day,hour,minute);

See the codes for the timer for iWeb 2.x or 3.x.

If this does not work for you, could you send me an email (click the "Email Me" link further up on this page) with your web page as an attachment and I'll see what else might be the problem.

— Bob

January 16, 2013 @ 10:22 PM EST
Manaf (Qatar) wrote...
I would like to have a code for day counter
we have an event taking place on Feb 06 2012
Event Name Day 1 continue till a target date (i.e. March 15)to post in sharepoint portal as HTML

Pls help

Admin:  Email sent requesting further clarification.

January 13, 2013 @ 2:46 AM EST
Bas Roijakkers (utrecht, England) wrote...
Hi, thanks for the script. Only thing is I cant use a body-tag for I'm working in a CMS. Is there a way to call the onload action a different way? (with js for instance)

onload="countdown(year,month,day,hour,minute)"


January 10, 2013 @ 10:28 AM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Thanks for your comment! Yes, an alternative is to place the script for the timer after the HTML code that places the timer in your page (instead of placing it in the HEAD section), then add
countdown(year,month,day,hour,minute);
as the last line of the script (just before the closing </script> tag). See the coding for placing the code using iWeb as an example. Let me know if you have further problems with this.

January 10, 2013 @ 11:04 PM EST
Patrick (Vancouver, BC, Canada) wrote...
Hi,

I was wondering if it was the same procedure if I wanted to add that to an HTML email?

Thank you,

Patrick


December 18, 2012 @ 12:54 PM EST
Page 9 of 18

Add Comment