HTML Countdown to Date v3 (Javascript Timer)

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

  1. Fill in the required target Date and target Time information
  2. Fill in how you want your countdown to be displayed
  3. Generate the HTML and JavaScript code for your countdown (button at bottom)
  4. You can preview your script (button at bottom)
  5. Copy and Paste the Source Code into your HTML page


Date Expires
Year:
Month:
Day:
Time Expires
Hour:
Minute:
Second:


Display Settings
NOTE: the default display setting will work for most people
They only need to be changed if you want to customize what is shown
Show Years: Disabled
Show 0-99+
Show 1-99+
Show 00-99+
Show 01-99+
Wording:
singular
plural
Show Weeks: Disabled
Show 0-99+
Show 1-99+
Show 00-99+
Show 01-99+
Wording:
singular
plural
Show Days: Disabled
Show 0-99+
Show 1-99+
Show 00-99+
Show 01-99+
Wording:
singular
plural
Show Hours: Disabled
Show 0-23
Show 1-23
Show 00-23
Show 01-23
Wording:
singular
plural
Show Minutes: Disabled
Show 0-59
Show 1-59
Show 00-59
Show 01-59
Wording:
singular
plural
Show Seconds: Disabled
Show 0-59
Show 1-59
Show 00-59
Show 01-59
Wording:
singular
plural
Show Milliseconds: Disabled
Show .000-.999
 



Source Code:
Your countdown expires: (select Preview first)

Comments

In expire: function(idxs) change the "Now!" text in line: this.display(this.counts[idxs[x]], "Now!");To whatever you want. Like: this.display(this.counts[idxs[x]], "Party Time");

If you want to forward the user's browser to a new page once the countdown has expired, edit your code and change:
expire: function(idxs){
for(var x in idxs) {
this.display(this.counts[idxs[x]], "Now!");
this.counts.splice(idxs[x], 1);
}
},
to:
expire: function(idxs){
window.location="index2.html";
},
just be aware it is not secure. Anyone can find the new page by looking at the page source. Also, anyone who visits the page with the countdown expired would always get forwarded to index2.html

If you want to show a unique message if the countdown will expire today (less than 24hrs left) inside tick: function() you can replace:
if(amount<0){
expired.push(idx);
}
with:
if(amount < 0){
expired.push(idx);
}
else if(amount < 86400000){// if time remaining is less than one day (60s*60m*24h*1000ms)
this.display(cnt, "Today!");
}
That will show "Today!" messages if less than 24hrs are left, "Now!" if the countdown has expired, and the time remaining if it is more than 24hrs away.

Expanding on the above, you can use any math in the (amount < 86400000) check. Just make the number into milliseconds. eg; to show "Finished?" if the time expired within the last 120 minutes (7200000 milliseconds in the past) use:
if(amount < -7200000){// if time remaining is less than 120 mins (120m*60s*1000ms)
this.display(cnt, "Finished?");
}
else if(amount < 0){
expired.push(idx);
}

It is simple to add additional countdowns. Near the bottom, simply use .add() to add more dates to your countdown. Where the first parameter is the date in the correct format (you can use the generator to create and format additional dates) and the second parameter is the id="" of the additional div where you will display the countdown.

So with the original and two additional countdowns, the very end of the script looks something like:
window.onload=function(){
	var cdown = new CDown();

	cdown.add(new Date(2015,1,18,18,54,36), "countbox1");
	cdown.add(new Date(2014,11,25,18,54,36), "countbox2");
	cdown.add(new Date(2013,11,31,18,54,36), "maple_syrup");
};
</script>
<div id="countbox1"></div>
<div id="countbox2"></div>
<div id="maple_syrup"></div>

Replace the original add: function(date,id) with this one:
add: function(date,id){
var nowd=new Date();

//set day of month
if(date.getHours()<nowd.getHours() || (date.getHours()==nowd.getHours()&&date.getMinutes()<=nowd.getMinutes())) date.setDate(nowd.getDate()+1);
else date.setDate(nowd.getDate());

date.setFullYear(nowd.getFullYear());//set year (four digits)
date.setMonth(nowd.getMonth());//set month (from 0-11)

this.counts.push({d:date,id:id});
this.tick();
if(this.state==0) this.init();
},
If the time has passed for today, that will automatically set the countdown day to "tomorrow" at whatever time you originally specified.

Counter is working great but one thing, i want counter work for 24 hours count down and when 24 hours are complete it should automatically start over for 24 hours.

24 hours count down to 00 hours then again 24 hours count down repeat for ever and never stop.

Please help

If you want it to expire at 00 hours, in the Time Expires boxes, fill out Hour, Minute, Second with zero and use the code in the comment you replied to.

Replace the original add: function(date,id) with this one:
add: function(date,id){
var day_of_week = 1;//0=sunday, 6=saturday
var nowd=new Date();

if(nowd.getDay()>day_of_week)day_of_week+=7;
date.setDate(nowd.getDate()+(day_of_week-nowd.getDay()));//sets day of month
date.setFullYear(nowd.getFullYear());//Sets year (four digits)
date.setMonth(nowd.getMonth());//sets month (from 0-11)

this.counts.push({d:date,id:id});
this.tick();
if(this.state==0) this.init();
},
Where day_of_week is the day of the week you want it to count down to (0=Sunday, 3=Wednesday, 6=Saturday). It will automatically reset the countdown each week. If the current day is the same day the countdown will expire and it is AFTER the countdown hour is past, it will show "Now!" until midnight when it rolls over and restarts the countdown.

Replace the original add: function(date,id) with this one:
add: function(date,id){
var day_of_month = 21;// what day of the calendar month to countdown to
var nowd=new Date();

date.setDate(day_of_month);
date.setFullYear(nowd.getFullYear());

if(nowd.getDate()>day_of_month){//if past day of the month, set month+1
date.setMonth(nowd.getMonth()+1);
}
else{//month is current month
date.setMonth(nowd.getMonth());
}

this.counts.push({d:date,id:id});
this.tick();
if(this.state==0) this.init();
},
Where day_of_month is set to the calendar day of the month you want to count down to. That will automatically reset the countdown each month when you pass that day.

Near the bottom, change your cdown.add line so it looks like:
window.onload=function(){
var cdown = new CDown();

cdown.add(new Date((new Date()).getTime()+(40*60*1000)), "countbox1");//40 mins * 60 secs * 1000ms from now
};
Where (40*60*1000) is your own math for how long in milliseconds after the page has loaded until the timer expires. In this case (40*60*1000) = 2400000 milliseconds = 40 minutes after page load.

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".

There is no good way to determine DST status with only JavaScript. The timezone offset is easy. Replace the default add: function(date,id) with the one below that will count down daily and handle timezone offset:
add: function(date,id){
var nowd=new Date();

//set this to the number of hours offset from UTC
tzOffset = -4;

dx = date.toGMTString();
dx = dx.substr(0,dx.length -3);
tzCurrent=(date.getTimezoneOffset()/60)*-2;
date.setTime(Date.parse(dx))
date.setHours(date.getHours() + tzCurrent - tzOffset);

//set day of month
if(date.getHours()<nowd.getHours() || (date.getHours()==nowd.getHours()&&date.getMinutes()<=nowd.getMinutes())) date.setDate(nowd.getDate()+1);
else date.setDate(nowd.getDate());

date.setFullYear(nowd.getFullYear());//set year (four digits)
date.setMonth(nowd.getMonth());//set month (from 0-11)

this.counts.push({d:date,id:id});
this.tick();
if(this.state==0) this.init();
},
where tzOffset is the UTC offset. But you're still on the hook for manually dealing with DST changing the offset between -4 and -5 for Eastern. You really need access to the server's time to accurately do what you are asking.

To get the most accurate amount of time left, you should do the initial "time left" calculations server-side. So calculate how many SECONDS are between "Now" and your expiration date using a language like PHP or ASP. Then simply set the JavaScript expiration date that many milliseconds (that's why the *1000 is in there) into the future.

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.

How can I get it to use multiple dates which replace each one as the set date passes, but start by using certain text beforehand?

for example:

Red starts in: 4 Days, 3 Hours, 10 Minutes
Blue starts in: 11 Days, 9 Hours, 47 Minutes
Green starts in: 18 Days, 5 Hours, 24 Minutes

Your help is much appreciated.