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 2 of 18
Facebookdel.icio.usDiggGoogle+TwitterLinkedIn
cpke wrote...
Hi bob,

i love your counters and would like to use one to count up in minutes:seconds

I was able to not display the days and hours. I also found out how to make it count up.

But i can't find out how to make it count minutes above 60.

So i would like to have it count to 60+ but it of course restarts at 00 after 60.

Is this possible some how?

Thanks in advance!

regards
cpke

February 17, 2016 @ 7:23 PM EST
cpke wrote...
I found it already.. dumb me Crying

was searching for more then an hour when i finaly got the bright idea that leaving out the amount of days is actualy the same as leaving out the hours.. and that one do is in the FAQ.

so if someone else is searching, i changed code to:

var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)+(dhour*60);

February 17, 2016 @ 7:30 PM EST
Joshua Buckner (Virginia Beach, USA) wrote...
on the recurring countdown is there a way to have an image pop up for a set time then counter resets?

December 18, 2015 @ 2:53 PM EST
Joshua Buckner wrote...
Thank you, how would I only keep the image there for about an hour then back to the countdown until next 00:00:00:00 then imagie again. Is there a time delay code?

December 19, 2015 @ 8:57 AM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Assuming you want the timer to countdown to a time on a daily basis, use the script available here: http://www.rmkwebdesign.com/Countdown_Timers/Repeating_Daily_Timer.html

Then set the start time one hour after the end time and put the HTML code for the image as the "current" variable. When the timer reaches the end time, the image should show until the start time, at which point the timer will start counting down again.

December 19, 2015 @ 2:09 PM EST
Joshua Buckner (Virginia Beach, USA) wrote...
Okay I am using the weekly timer, can the same code be applied? I couldn't find "current" in the weekly.

December 19, 2015 @ 7:35 PM EST
Bob Kuhnhenn (Westlake, OH, USA) wrote...
Unfortunately, the repeating weekly timer, as it is now, has no "current" variable, as it just resets itself when the end time is reached, with no pause between the end time and start time. I'll have to play around with the code to get it to do that and send you an email once I modify it.

December 19, 2015 @ 7:45 PM EST
Joshua Buckner (Virginia Beach, USA) wrote...
Thank you.

December 19, 2015 @ 7:48 PM EST
Mulyana Yusuf (Jakarta, Indonesia) wrote...
The First, thank's for your share, it's very useful for me, but i have a question. How if I want to show the countdown timer in table ? It will like a field of a record.

November 3, 2015 @ 10:02 PM EST
Page 2 of 18

Add Comment