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 10 of 18
Facebookdel.icio.usDiggGoogle+TwitterLinkedIn
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Unfortunately, this will not work in HTML email because it uses javascript, which is not supported by email clients. You might want to look into Flash based timers; as I think that those would work.

December 18, 2012 @ 3:04 PM EST
Jeffz (Italy) wrote...
How I can make the counter works on standard time instead by computer setting time.

The issue is if the computer time is wrong the counter will display wrong too.


December 9, 2012 @ 12:30 PM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Javascript uses the computer's time setting; PHP uses the server's time settings. Since this countdown timer uses javascript, it will use the computer's time setting.

December 9, 2012 @ 12:58 PM EST
MohdJaved (Delhi, India) wrote...
how can i use it multiple timer shown on the page and how can i set it different time on the different timer on a page please help me it is very nice

November 28, 2012 @ 4:28 AM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
This has already been answered previously, but I will repeat it here.  The simplest way to have more than one countdown timer on your page is to include them in separate iframes on your page using the following instructions:
  1. make a separate page for each countdown timer and name each page something unique, such as timer1.html, timer2.html, etc.
  2. on your main page (the page you want to display the timers on) add an iframe for each of the countdown timers (position them by changing the CSS top and left properties noted in red):
    <iframe id="timer1" src="timer1.html" width="412" height="76" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowTransparency="true" style="position: absolute; top: 10px; left: 100px; overflow: hidden;" ></iframe>
    <iframe id="timer2" src="timer2.html" width="412" height="76" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowTransparency="true" style="position: absolute; top: 350px; left: 100px; overflow: hidden;" ></iframe>

November 29, 2012 @ 12:53 AM EST
Jeff (Italy) wrote...
Your counter is great and I am using it

But I know you said you mention this many times but i want to ask again if you dont mind.

MULTIPLE COUNTERS ON SAME PAGE

In my case it is not feasible to do the iframes,

I am trying to figure out what need to change add or delete from the code.

for sure i changed the count2 to count3 ect...

but not getting the timer.

can you provide me with the code for count3 based that on same page there is count2?


December 11, 2012 @ 2:20 AM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Which style of the timer are you using; there will be multiple things to change in each of the new timers—not just the variables (year, month, hour, minute, timezone). Let me know which style you are wanting to use and I will try to get you a sample page with three of the timers with different end times tomorrow.

December 11, 2012 @ 2:36 AM EST
Angus Kerr (Scotland, UK) wrote...
Fantstic bit of code and so simple.
Now there has been a bit of comment about using the counter more than once on a page (and I beleive you were going to code something up). Have you done that as I would be really interested as this is the only bit from this gem.

Any help appreciated.

Angus


December 12, 2012 @ 10:07 AM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
I've added a new page (linked to from the "FAQ" page) that lists the steps for putting multiple timers that can have different target times on a single page. The direct link is: http://www.rmkwebdesign.com/Countdown_Timers/Multiple_Timers.html

December 12, 2012 @ 6:34 PM EST
Page 10 of 18

Add Comment