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 15 of 18
Facebookdel.icio.usDiggGoogle+TwitterLinkedIn
Stephen Kelly (West Midlands, England) wrote...
Hi there just like to say FANTASTIC & thank you so much for allowing us mere mortals to use your code.
I have borrowed Style A1, And would like to know if it is possible to show the leading "0", As I have noticed when it counts down & gets to a single digit it dos not show i-e "01" with the minutes or the seconds & I would really like that if possible.
Regards
Stephen V Kelly Unsure

April 5, 2011 @ 9:32 PM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Thanks for the comment, mere mortal. Wink
To get the minutes and seconds to display a leading "0" when less than 10, insert the following two lines:

if (dmin < 10) {dmin = "0" + dmin;}
if (dsec < 10) {dsec = "0" + dsec;}

into the code just before this line:

if(dday<=0&&dhour<=0&&d min<=0&&dsec<=0){

April 6, 2011 @ 2:31 AM EDT
pirsoforos (Italy) wrote...
Hi, can u please email me the changes to display the time left in hours,minutes,seconds.
thank you.

April 2, 2011 @ 7:36 PM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
The detailed instructions can be found on this page:
http://www.rmkwebdesign.com/Countdown_Timers/No_Days.html (which can also be accessed from the "FAQ" page).

April 3, 2011 @ 12:26 PM EDT
adam (poole, UK) wrote...
Hi,

I've Borrowed (I don't think I can ever give it back!) style 2A and was wondering if it is possible to after the date to display the word 'left' so it says 23 days, 18 hours, 20 mins and 31 seconds left.

is this possible?

thank you for your time and the great script!


March 31, 2011 @ 11:03 AM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Thanks for your comment! Yes, it is possible to do that. Just go to the following section of the code:

else {
document.getElementById('count').innerHTML =+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds";
setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);
}

and add "left" immediately after "seconds" so that the code now looks like this:

else {
document.getElementById('count').innerHTML =+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left";
setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);
}

March 31, 2011 @ 11:52 PM EDT
Jacob (Connecticut, USA) wrote...
excellent countdown clocks. my question. is it possible that when the countdown expires it triggers an event like having an image pop up in the page. for example, once the countdown hits zero, i want a picture to pop up that says click link to visit page. you click it and it opens the new webpage. hoping this is possible

February 24, 2011 @ 1:52 AM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Glad you like the countdown clocks! Yes, it's possible to have an image show up once the timer reaches the target date and time. First, place the image in your page but make it's display property "none" and give the image a unique ID; then in the countdown timer script, add

document.getElementById('image ID').style.display='inline';

after

if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){

I'll send you an e-mail with more specific details.


February 24, 2011 @ 11:33 PM EST
Hank wrote...
Thank you this was very interesting and useful. I will uphold your request for showing the credits.

Admin:  Thanks for your comments; glad the site was helpful!  Smile

February 4, 2011 @ 4:41 PM EST
Page 15 of 18

Add Comment