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 3 of 18
Facebookdel.icio.usDiggGoogle+TwitterLinkedIn
Bob Kuhnhenn (Westlake, OH, USA) wrote...
If I understand your question correctly, place the HTML code containing the timer in your table and the CSS in the head and script for the timer at the very boottom. Which style timer are you hoping to use?

November 4, 2015 @ 11:36 PM EST
Mulyana Yusuf (Jakarta, Indonesia) wrote...
Sorry if my english is bad, i was try to place the html code in the table, but it still unruning/not running, i have trouble for replace the id with class on javascript, can you give me example (Source code) ? Grin thank's

Admin:  Email was sent with code.

November 5, 2015 @ 1:23 AM EST
Mulyana Yusuf (Jakarta, Indonesia) wrote...
Thank you so much, Grin

November 6, 2015 @ 12:51 AM EST
Mulyana Yusuf (Jakarta, Indonesia) wrote...
I was very impressed with your attention, but I mean as I describe below

NO Name TIME
1 Jhone 09:12:11
2 Shane 10:12:11
3 Shawn 11:10:11

sorry if I bother you Crying

Admin:  Easiest way is to use iframes inside the main table; the source of each iframe would be a different html page containing the timer corresponding to that iframe's row.  Email sent with sample code.

November 6, 2015 @ 1:32 AM EST
Mulyana Yusuf (Jakarta, Indonesia) wrote...
Saya sudah menerima email, saya sangat berterima kasih untuk bantuan anda Grin

November 6, 2015 @ 7:00 PM EST
kumar (chennai, India) wrote...
Smile nice....its very usefull thanku....Smile

September 12, 2015 @ 4:34 AM EDT
Sasha (Barcelona, Spain) wrote...
Hi there. A big thanks for this beautiful counter! It's working perfect when I input all the script in the HTML. However I'd like to have a separate .js file that would be referenced in html. I have tried putting the code from between the <script></script> brackets into a separate files. I have successfully linked the .js to the html, because the timer is showing, however it is not counting down :(

In the .html file I have only two things: the <div> where my counter is outputted and right below it the <script>countdown(year, month, day, hour, minute)</script>

Maybe that's the problem? I am stuck and lost. Would appreciate any help. Thank you!

August 18, 2015 @ 12:03 PM EDT
Bob Kuhnhenn (Westlake, OH, USA) wrote...
I'm glad you like the countdown timers!

To get the timer to work, you need to add the following to the body tag:
onload="countdown(year,month,day,hour,minute)"

so that in your HTML page, the body tag looks like this:
<body onload="countdown(year,month,day,hour,minute)">

Also, just to make sure, the separate javascript file that has the countdown code should be linked by putting the following in the "head" section of your HTML page:
<script type="text/javascript" src="name_of_timer_code.js"></script>

You do not need to put the following code in the HTML page:
<script>countdown(year, month, day, hour, minute)</script>

Hope that solves the problem for you!

August 18, 2015 @ 9:41 PM EDT
Sasha (Barcelona, Spain) wrote...
Thank you Bob for the quick answer from across the big ocean (:

The thing is I am using this countdown as part of a simple image banner ad which I have to create in Google Web Designer. With all the automated code/script that GWD produces maybe there's some conflict :( I've tried to use another countdown.js which is triggered in .html with a setInterval function instead of onload in the body tag and this seems to work for GWD....in that code however I do not know how to add a leading and no support is provided :(

Well, I continue my quest to make this work! This is what happens when flash-designers are forced to suddenly switch to HTML5....no idea what they're doing :D

August 19, 2015 @ 5:18 AM EDT
Page 3 of 18

Add Comment