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 12 of 18
Facebookdel.icio.usDiggGoogle+TwitterLinkedIn
Bob Kuhnhenn (Westlake, OH, USA) wrote...
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>

October 7, 2012 @ 3:42 PM EDT
Mark B. (TX) wrote...
This an awesome timer. Having said that, I'm helping a good friend in setting up the timer on his web page but the numbers don't line up with the days hours minutes seconds.

What am I doing wrong?

Admin:  email sent with details to fix.

September 20, 2012 @ 11:57 PM EDT
Barry (England) wrote...
Great stuff Grin

I wondered how I might implement this using only minutes and seconds, counting down from a set value like 02:00 (2 mins).

Also any advise on how the number pngs could be exchanged for a single sprite?


September 18, 2012 @ 6:49 AM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Sorry for the delay in responding; I'm still working on changing the digital timer to display just minutes and seconds from a preset value. I'll send it to you via email once I finish--hopefully in the next day or two.

Regarding using a single sprite, I haven't attempted to try that as I think it would be more complicated.


September 21, 2012 @ 1:31 AM EDT
immLiz (Bath, UK) wrote...
Smile
Thank you so much for this.

It is the 2nd Counter I tried - the first was complicated and then didn't work in all browsers.

This is really great - clear instructions - and it works in all major browsers.
Smile

Admin:  You're welcome! Glad you like it and that it's working properly!

September 3, 2012 @ 9:34 AM EDT
MB (Brighton, UK) wrote...
THANK YOU SO MUCH FOR MAKING THIS FREE YOU ARE AMAZING

Admin:  You're welcome; thanks for your appreciation.  

August 27, 2012 @ 10:43 AM EDT
Mukund (Chennai,Tamilnadu, India) wrote...
I need code for displaying timer only in terms of mins and secs .
Please Give me soon . Thank you for this nice code :)

Admin:  email response sent.

August 26, 2012 @ 12:59 AM EDT
Bo Liu (Kanata, Canada) wrote...
Hi, first of all, I wanna thank you for providing this code. It's exactly what I was looking for. However, I am very new to web hosting. I am trying to put this code down as a page (in html). I am using wordexpress to manage the website, and domain is from godaddy, domain name: annabug-and-bbnan.com. If you click on Here is your gift! you can see the clock isn't properly positioned nor displayed, but when I run this as a standalone html page it works perfect. What I modified in your code is just the time to count to, red digits, and I changed the path of the files to where they are located in my admin directories. The colon seems to be appearing, but everything else doesn't show. Can you please help me out with this, thank you very much.

August 22, 2012 @ 10:25 AM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
I'm glad you like the code. Sorry you're having problems with it. I've not used WordExpress, so I'm not sure if that is causing the problem, but when I view the source code to your page, I notice a lot of extra code that I think is interfering with the display of the timer. The extra code includes these tags:
  • <p> </p> <br />

I've noticed these extra tags in both the style definitions and in the html code within the body section of the timer. If you remove those extra tags, the timer should display correctly.

August 22, 2012 @ 3:28 PM EDT
Bo Liu (Kanata, Canada) wrote...
Hi, yes you are right. It is the <p></p><br/> tags not working. Apparently it's reading "return"(in the code) as a <p>. I've removed some, but the ones in the javascript part, it doesn't seem to work. I think it's either WordPress or the theme I'm using is causing it. I am also have a hard time finding the source file. I've opened a support ticket on their forum to have this sorted out. Thank you very much for identifying the problem. SmileSmile

August 22, 2012 @ 7:06 PM EDT
Page 12 of 18

Add Comment