Description
- The following Javascript generator will help you create a countdown clock that will count down the seconds, minutes, hours, days, weeks, years remaining until your target date.
- This is the third version of this script. Behavior is the same as v2, but the internals are completely rewritten in order to make handling multiple countdowns more efficient and allow for easier drop-in changes.
Note
-
Display Settings
- Disabled If the number is disabled, it will never be shown. Any amount that exists is passed on to smaller increments. (eg; 4 hours disabled will display as 240 mins instead)
- Show 0-99+ The number is always shown (even if it is a zero)
- Show 1-99+ The number is shown if its value is 1 or more (zero is hidden)
- Show 00-99+ The number is always shown (even if it is a zero). A two-digit number is always shown (for 0-9)
- Show 01-99+ The number is shown if its value is 1 or more (zero is hidden). A two-digit number is shown for 1-9
- If you want to change the size, font, or color you can edit the last line of your generated code and add a style="" property like: <div id="countbox1" style="font:14pt Arial; color:#FF0000;"></div>
- Enabling Milliseconds requires the browser to update the countdown about 40 times every second (when disabled it only runs/updates once per second). Enabling milliseconds uses WAY more processing power, although it shouldn't cause problems unless the computer or browser is very old.
Steps
- Fill in the required target Date and target Time information
- Fill in how you want your countdown to be displayed
- Generate the HTML and JavaScript code for your countdown (button at bottom)
- You can preview your script (button at bottom)
- Copy and Paste the Source Code into your HTML page
Comments
September 5, 2014 - 5:15pm — ricocheting
Dealing with expired Text
Consolidated answers for changing the text that is generated after timer expires
September 5, 2014 - 5:18pm — ricocheting
HOWTO: Basic change to expired text
this.display(this.counts[idxs[x]], "Now!");
To whatever you want. Like:this.display(this.counts[idxs[x]], "Party Time");
December 21, 2014 - 7:21pm — ricocheting
HOWTO: Add additional text to the same line as countdown
September 5, 2014 - 5:23pm — ricocheting
HOWTO: Change the page when countdown has expired
September 5, 2014 - 5:29pm — ricocheting
HOWTO: Show custom message if countdown expires "today"
September 5, 2014 - 5:33pm — ricocheting
HOWTO: Show custom message expired less than 120 mins ago
Example: to show "Finished?" if the time has expired, but it expired less than 120 minutes ago (7200000 milliseconds in the past) use:
January 26, 2016 - 11:32am — Mike Herbstreit
Different Format
Thanks for this great code! I created a table format for outputting the results. Below is what I did.
Replaced:
format: function(r){
var out="";
if(r.d != 0){out += r.d +" "+((r.d==1)?"day":"days")+", ";}
if(r.h != 0){out += r.h +" "+((r.h==1)?"hour":"hours")+", ";}
out += r.m +" "+((r.m==1)?"min":"mins")+", ";
out += r.s +" "+((r.s==1)?"sec":"secs")+", ";
return out.substr(0,out.length-2);
},
With:
format: function(r){
// Table Format with Digital Readout
var out = "<table cellspacing=0 cellpadding=0 border=0 class=cdTimer>";
out += "<td align=center class='cdTimerTitle cdTimerVLine'>"+((r.d==1)?"DAY":"DAYS")+"</td>";
out += "<td align=center class='cdTimerTitle cdTimerVLine'>"+((r.d==1)?"HR":"HRS")+"</td>";
out += "<td align=center class='cdTimerTitle cdTimerVLine'>MIN</td>";
out += "<td align=center class='cdTimerTitle'>SEC</td><tr>";
out += "<td align=center class='cdTimerDigit cdTimerVLine'>"+ r.d +"</td>";
out += "<td align=center class='cdTimerDigit cdTimerVLine'>"+ r.h +"</td>";
out += "<td align=center class='cdTimerDigit cdTimerVLine'>"+ r.m +"</td>";
out += "<td align=center class='cdTimerDigit'>"+ r.s +"</td></table>";
return out.substr(0,out.length-2);
},
Here is the CSS:
.cdTimer {
background: -webkit-linear-gradient(90deg, #ccc 2%, white 20%, white 50%, DarkCyan 60%);
background: -moz-linear-gradient(90deg, #ccc 2%, white 20%, white 50%, DarkCyan 60%);
background: -ms-linear-gradient(90deg, #ccc 2%, white 20%, white 50%, DarkCyan 60%);
background: -o-repeating-linear-gradient(90deg, #ccc 2%, white 20%, white 50%, DarkCyan 60%);
background: -linear-gradient(90deg, #ccc 2%, white 20%, white 50%, DarkCyan 60%);
border: 1px solid #808080;
padding: 0 3px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.cdTimerDigit {
color: #cc6600;
font-family: digital-7, arial;
font-size: 21px;
}
.cdTimerTitle {
color: #ffffff;
font-family: Calibri;
font-size: 14px;
padding:0 4px;
}
.cdTimerVLine {
border-right:1px solid #808080;
}
You can change the colors, transitions, etc. to whatever you want. You may need to download and install the digital font or just use a standard font.
September 5, 2014 - 5:44pm — ricocheting
HOWTO: Add multiple countdowns
So with the original and two additional countdowns, the very end of the script looks something like:
December 21, 2014 - 7:17pm — ricocheting
HOWTO: Combining onload events from other scripts
December 26, 2021 - 2:03pm — Jason
How would I be able to use
How would I be able to use this to create two set times everyday for a given calendar of set dates.
So each day the countdown is set and the same times. It would go from Opens in xxxx to Closes in xxx
Also using multiple countdowns for different sessions.
December 27, 2021 - 1:23pm — ricocheting
Answer
Yes, something like that could be done. If it opens and closes the same time every day, it sounds like you might want something like the HOWTO: Auto countdown daily comment.
September 15, 2014 - 6:42pm — ricocheting
Automatically Reset Countdown
[edit] Consolidated answers for automatically resetting the countdown over 'x' intervals. See specific replies for interval.
September 15, 2014 - 6:45pm — ricocheting
HOWTO: Auto countdown daily
September 15, 2014 - 6:51pm — ricocheting
HOWTO: Auto countdown to day of week
September 15, 2014 - 6:59pm — ricocheting
HOWTO: Auto countdown to day of month
September 15, 2014 - 7:07pm — ricocheting
HOWTO: Auto countdown to x minutes after page load
October 1, 2014 - 8:17am — Brian
Using it based on UTC or our local time zone
Can this be used based on say UTC -5? Or 4:00PM EDT New York time? We are using it to count down every day until a certain cut-off shipping time as in "order in the next 4 hours and 12 minutes to have your order shipped today".
October 1, 2014 - 7:00pm — ricocheting
HOWTO: Timezone offset
October 16, 2014 - 7:15pm — ricocheting
HOWTO: Use server time in countdown
Example: in PHP your cdown.add() line should look something like this (where mktime() is your expiration date):
cdown.add( new Date((new Date()).getTime() + <?php echo mktime(0,0,0,10,25,2014) - time(); ?>*1000), "countbox1");
In ASP.NET (not confirmed) it should look something like:
cdown.add( new Date((new Date()).getTime() + <%=DateDiff("s", DateTime.Now, timeStampFromDatabase) %>*1000), "countbox1");
Advantages
Since this method uses the server to calculate "expires xx seconds from now" this avoids and prevents any issues with timezone differences, Daylight Savings Time, and any issues with the visitor's clock not being correct.
November 24, 2014 - 12:36pm — Chris
Skip to 2nd date/ change message
I have a question:
When countdown date/ time 1 expires, I would like it to go to the 2nd date. For example from:
Date 1: November 13 2015 6:00pm. When date/ time expires, I would like it to countdown to the END of that season:
Date 2: January 3th 2016 10:00pm.
Also, I would like it to show a different message:
Date/ time 1 message (during): Season 2015 start:
Date/ time 2 message (during): Time left:
Message when date/ time 2 expires: (blank)
December 21, 2014 - 7:35pm — ricocheting
HOWTO: Custom message with each countdown
cdown.add(new Date(2014,11,25,0,0,0), "countbox1", "Christmas Starts: ");
cdown.add(new Date(2015,0,1,0,0,0), "countbox2", "New Years Starts: ");
December 21, 2014 - 7:39pm — ricocheting
HOWTO: On expire, show next active countdown
cdown.add(new Date(2014,11,25,0,0,0), "countbox1");
cdown.add(new Date(2015,0,1,0,0,0), "countbox1");
August 26, 2015 - 5:40am — Sasha
Stopping CDown after a certain amount of time
I was in need of stopping/removing the CDown after a certain amount of time - let's say 30 seconds. So it counts down to the specified date which is some months away but stops after 30 seconds (as if it broke down). I used the following code to stop the counter
window.setTimeout(function(){window.clearInterval(self.interval)}, 30000);
and stuck it in the init: function(){} right below the existing setInterval() line. Sharing incase anyone else has a similar request.
February 5, 2016 - 5:48pm — Tom
Countup timer?
Can the JS be modified to count the time since a date?
February 6, 2016 - 10:51pm — ricocheting
HOWTO: Count up from time
// if time is already past
if(amount<0){
expired.push(idx);
}
// count up for "expire" date
if(amount<0){
amount = now-cnt.d.getTime();
this.display(cnt, this.format(this.math(amount)));
}