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 13 of 18
Facebookdel.icio.usDiggGoogle+TwitterLinkedIn
Ilan Shalev (Israel) wrote...
Hey,
I used the countdown in my page but it flicker in Internet Explorer.
who can i fix that?

August 15, 2012 @ 9:32 AM EDT
Ilan Shalev (Israel) wrote...
Hey,
I'm sorry, the problem was on facebook not on you script!
your script is fine! thank!

Admin:  No problem; glad you found out what was causing the issue.

August 16, 2012 @ 4:40 AM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
I've changed this comments system to one powered by Commentics and modified it to this style. All the previous public comments were transferred to this new system.
Cool

August 15, 2012 @ 4:46 AM EDT
Jaz (Austin TX, USA) wrote...
first time ever using a timer and i found yours to be the simplest to work with, however, i was able to install it and it display nicely in firefox BUT im getting NaN [Not a Number] showing up in safari and chrome. any idea of how i can address this?

August 5, 2012 @ 8:32 PM EDT
Jaz (Austin TX, USA) wrote...
OK! i figured it out. just in case someone else has the same issue. turned out that the numerical values i put for the starthour and endhour were conflicting and created an error: NaN. after i reverse engineering my problem i was able to figure this out. so fyi! if you get an NaN error, then look at your starthour and endhour values. in fact, just look at all the values just in case you're using start/end minutes too.

a big hi 5 to the person who share this code and is very kind to share with all of us. Thank you!!!!!!

Admin:  I was just checking your site and see that it is working now, glad you found the problem.

August 5, 2012 @ 9:34 PM EDT
Reme (South Africa) wrote...
Hi, just started using this script and so far its working very well. I would however like it to always display double digits.

Is it possible to have it display always as 01 instead of just 1

Thanks


July 20, 2012 @ 5:32 AM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Glad the script is working well for you! To add a zero before single digits, add the following function to the script (either before or after "function countdown(yr,m,d,hr,min)" but within the <script>...</script> tags):

function leadingZero(i) {
  if (i<10) i="0" + i;
  return i;
}

Then in the countdown function just above the line

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

add the following code:

dhour = leadingZero(dhour);
dmin = leadingZero(dmin);
dsec = leadingZero(dsec);

July 20, 2012 @ 11:03 PM EDT
moses (Kaduna, Nigeria) wrote...
thanks for the great help

July 2, 2012 @ 8:15 AM EDT
john (Norway) wrote...
It is simply brilliant and many thanks for you! I am gonna use the Style 1D for my coming soon website. But i have one thing to ask you
In a <marguee></marquee> tag i want to write a sentence stating how many days are remaining for the event. So, how can i display only the Days part of the counter? to make it more clear, just down the countdown timer one line which states how many days left for the event.

thank you in advance !

Admin:  email with details was sent.

April 6, 2012 @ 4:22 PM EDT
Page 13 of 18

Add Comment