HTML Countdown to Date (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 second version of this script. The "Display Settings" section was added. The AM/PM bug with creating dateFuture was fixed. The function GetCount() was changed to allow multiple countdowns on the same page.

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)
JavaScript

Comments

April 3, 2011 - 3:39pm — ricocheting

This page contains the new version of the old v1 HTML Date with Countdown Timer. Using many of the old comments as guidelines, this new version was created that allows you to automatically make many of the requested customizations (instead of manually needing to edit the code).

I tested it fairly thoroughly, but you can report any bugs or glitches here.

April 5, 2011 - 9:59am — Anonymous

I've been working with your previous code. I have 2 countdowns and would like them labeled differently. On your previous threads I see where you said to add "Sale ends in" but putting a label there will put it on both countdowns. How can I label them differently?

April 5, 2011 - 5:10pm — ricocheting

To add custom labels on two countdowns, change:
document.getElementById(iid).innerHTML=out;to

if(iid=='countbox1'){
document.getElementById(iid).innerHTML="Sale ends in: "+out;
}
else if(iid=='countbox2'){
document.getElementById(iid).innerHTML="Expires in: "+out;
}

where the if() conditions match what you named the separate IDs

April 4, 2011 - 11:32pm — Anonymous

Thanks for your efforts on this - it is a useful piece of code. I'd like to base the countdown on the server's clock instead of the clock on the user's PC. Maybe this will be useful to others who would also like to do this.

I can do that by doing the date/time calculations on the server and sending the total seconds to this function (along with a few mods to pass the seconds to the amount variable and remove the division for milliseconds). The problem I'm having is that it will display the starting timer but will not advance. Do you see anything that would be causing this? Thanks.

April 5, 2011 - 5:41pm — ricocheting

It's a bit harder than it sounds. You'll need to use PHP to do all the initial calculations, then just use javascript to subtract how much time has elapsed since the browser was loaded. Change your dateFuture line like:

dateFuture1 = new Date(2011,3,20,15,31,46);

to:
<?php
    //amount of server seconds until expires *1000 (to get ms)
    echo "server_amount=". (mktime(15,31,46,4,20,2011) - time())*1000 .";\n";

// [edit: 2011-10-11] if you need a timezone specific time, base the expires off GMT and use gmmktime() instead. eg;
// echo "server_amount=". (gmmktime(5,0,0,12,20,2011) - time())*1000 .";\n";
?>
// now holds browser based expiration date as (milliseconds) int instead of JS date object
dateFuture1 = server_amount + new Date().getTime();

and the calculation line from:
amount = ddate.getTime() - dateNow.getTime();
to
// modified for int instead of JS date object
amount = ddate - dateNow.getTime();

You will need to use mktime() in PHP to create the expiration date. It does not use the same formatting as Javascript Date() does you'll need to manually convert your expires time (note: PHP also uses 1-12 months instead of 0-11 like Javascript).

July 9, 2012 - 3:59pm — Anonymous

Hello, using Perl I have captured the server time in local variables, what format do I change it to to make it compatible with your javascript?
Thanks.

July 10, 2012 - 3:20pm — ricocheting

If you're using code similar to the above, you need to create the unix timestamp for when the timer expires, subtract the current unix timestamp, then print the javascript server_amount variable with that value assigned to it. Probably something like:
print "server_amount="".(1342940482-time)."";\n";

May 1, 2011 - 6:58pm — ricocheting

In the code you generated, you can just replace the Now! text with whatever you want:
document.getElementById(iid).innerHTML="Now!";

May 25, 2011 - 11:07pm — ricocheting

change:
document.getElementById(iid).innerHTML="Now!";to:
window.location="index2.html";be aware it's not secure. Anyone would be able to get 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

June 23, 2011 - 2:01pm — Anonymous

Hi! This Javascript generator is a superb piece of work. :) I'm not an expert in Javascript, so please forgive me for asking: how do you merge two countdowns into a single script? I did your instructions by changing the values into dateFuture2 and countbox2, but only one countdown is appearing on my site.

June 24, 2011 - 12:52pm — ricocheting

It's unnecessary to have everything twice when you need two countdowns. You just need to double up those specific dateFuture2 and countbox2 parts.
<script type="text/javascript">
dateFuture1 = new Date(2011,8,19,10,00,00);
dateFuture2 = new Date(2011,10,3,9,00,00);

function GetCount(ddate,iid){

dateNow = new Date(); //grab current date
amount = ddate.getTime() - dateNow.getTime(); //calc milliseconds between dates
delete dateNow;

// if time is already past
if(amount < 0){
document.getElementById(iid).innerHTML="Now!";
}
// else date is still good
else{
days=0;hours=0;mins=0;secs=0;out="";

amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

days=Math.floor(amount/86400);//days
amount=amount%86400;

hours=Math.floor(amount/3600);//hours
amount=amount%3600;

mins=Math.floor(amount/60);//minutes
amount=amount%60;

secs=Math.floor(amount);//seconds

if(days != 0){out += days +" "+((days==1)?"day":"days")+", ";}
if(hours != 0){out += hours +" "+((hours==1)?"hour":"hours")+", ";}
out += mins +" "+((mins==1)?"min":"mins")+", ";
out += secs +" "+((secs==1)?"sec":"secs")+", ";
out = out.substr(0,out.length-2);
document.getElementById(iid).innerHTML=out;

setTimeout(function(){GetCount(ddate,iid)}, 1000);
}
}

window.onload=function(){
GetCount(dateFuture1, 'countbox1');
GetCount(dateFuture2, 'countbox2');
};

</script>
<div id="countbox1"></div>
<div id="countbox2"></div>

June 26, 2011 - 5:33pm — Jaykay

Where is the generated remaining time linked to? Which time zone? My project today is to generate a countdown clock for September 8, 2011 at 8:30p ET. The result I get appears to be 21 hours later than a countdown clock which is adjusted from GMT to -4:00GMT for NYC (ET zone).

I get 74 days, 3 hours ... and the GMT adjusted site is running at 73 days, 6 hours. Is it possible to properly adjust for ET?

[edit] Thanks tons it is working perfectly now!

June 27, 2011 - 12:43pm — ricocheting

The countdown will show the time remaining until September 8, 2011 at 8:30pm in visitor's local time. It is not timezone specific.

To make it count down to in a specific timezone, near the top directly under your dateFuture1 line, add these new lines:

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

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

make sure you change the tzOffset value to whatever your GMT timezone offset is. Also be aware daylight savings time can screw with it depending on where you live.

July 5, 2011 - 10:42am — Anonymous

I am looking to modify this so that on 0 days it says now, but if it is negative then it says that it has passed. Is there anyway to do this?

July 5, 2011 - 12:07pm — ricocheting

If you want to show a different message for "today" you can replace:

if(amount < 0){
document.getElementById(iid).innerHTML="Now!";
}
with:
if(amount < 0){
document.getElementById(iid).innerHTML="Past!";
}
else if(amount < 86400000){// if time remaining is less than one day (60s*60m*24h*1000ms)
document.getElementById(iid).innerHTML="Today!";
}

September 14, 2011 - 1:38pm — Anonymous

How can you modify the script or dateFuture1 = new Date(2011,8,15,0,1,1);
so that the timer automatically starts over after it has expired?
An example is a site that offers daily deals. Thanks!

September 15, 2011 - 2:56pm — ricocheting

Try this. Near the top directly under your dateFuture1 line, add these 4 new lines:

dateNow = new Date();
dateFuture1.setDate(dateNow.getDate()+1);//sets day of month
dateFuture1.setFullYear(dateNow.getFullYear());//Sets year (four digits)
dateFuture1.setMonth(dateNow.getMonth());//sets month (from 0-11)

That will automatically set the countdown day to "tomorrow" at whatever time you specified originally.

September 28, 2011 - 2:52am — Anonymous

I found when adding a link to the output message that the quotes in the link are throwing off the rest. So I had to use:
document.getElementById(iid).innerHTML='Go to: <a href="#test">test</a> '+out;

September 29, 2011 - 3:11pm — Anonymous

I'm new to javascript, so I'm not sure whats the best way to achieve this - I'd like to have hours-days-seconds to have different classes or be in different divs. What would the best way to do this be?

September 29, 2011 - 6:49pm — ricocheting

the easiest way would be to edit the "out" string. Change (your code might look slightly different depending on the settings):

if(days != 0){out += days +" "+((days==1)?"day":"days")+", ";}
if(hours != 0){out += hours +" "+((hours==1)?"hour":"hours")+", ";}
out += mins +" "+((mins==1)?"min":"mins")+", ";
out += secs +" "+((secs==1)?"sec":"secs")+", ";
to something like
if(days != 0){out += '<div class="days">'+days +" "+((days==1)?"day":"days")+"</div>";}
if(hours != 0){out += '<div class="hours">'+hours +" "+((hours==1)?"hour":"hours")+"</div>";}
out += '<div class="mins">'+mins +" "+((mins==1)?"min":"mins")+"</div>";
out += '<div class="secs">'+secs +" "+((secs==1)?"sec":"secs")+"</div>";

August 19, 2011 - 3:15am — kotlerk

Is there any way to change the design for the wordings with different styles? Let say, "days","hours" is red in color, and the digits are green in color?

August 19, 2011 - 5:04pm — ricocheting

Well, it wasn't really made to support it, but in the wording for each you could plug in HTML. It should work as long as the wording does not contain a " quote symbol. eg use:
<span style='color:red'>mins</span>

December 27, 2011 - 3:26pm — ricocheting

You can center the countdown by changing the last line in the code to something like:

<div id="countbox1" style="text-align:center;"></div>

January 26, 2012 - 5:34am — Anonymous

My language (Croatian) uses more than two names for things like "days." Here are the rules I have to use (hopefully someone in a similar situation might find them helpful):

LastDigitDays = days.toString().charAt(days.toString().length-1);
LastDigitHours = hours.toString().charAt(hours.toString().length-1);
LastDigitMins = mins.toString().charAt(mins.toString().length-1);

if(days!=0 && LastDigitDays=="1" && days!=11){out += days +" dan, ";}
else if(days!=0){out += days +" dana, ";}

if(hours==2 || hours==3 || hours==4){out += hours +" sata, ";}
else if(LastDigitHours=="1" && hours!=11){out += hours +" sat, ";}
else{out += hours +" sati, ";}

if(mins==12 || mins==13 || mins==14){out += mins +" minuta, ";}
else if(LastDigitMins=="2" || LastDigitMins=="3" || LastDigitMins=="4") {out += mins +" minute, ";}
else{out += mins +" minuta, ";}

April 26, 2012 - 4:45am — Anonymous

Hi there, when the timer reaches its date would it be possible to change dateFuture to datePast to now count up?

October 16, 2012 - 12:23pm — Anonymous

I am wondering; Is there any way I can get the dates out of a mySQL database?
Like: dateFuture1 = new Date($year,$month,$date,$hour,$min,$sec); I need multiple of them..

Also; can I get (some of) the countdowns to restart to the next year when they pass?

October 17, 2012 - 11:58am — ricocheting

Yes, using mysql to pull the date will work fine. Just remember new Date() month that JavaScript uses starts at zero, while PHP the month starts at 1.

If you want the countdown to restart each year after it passes, probably the easiest way would be to use PHP to check if the date you're pulling from mysql has expired, if so add +1 to $year.

May 12, 2013 - 3:36pm — ricocheting

You can create an html file on your desktop (eg; countdown.html) and put the source code into it. To see the countdown you will need to open the HTML file in your browser though (doubleclicking the file should work).

However, if you want to actually show the countdown numbers on your desktop, you'll need to find a Windows gadget or app to do something like that.