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 (disabled it only has to update the count once per second). Enabling milliseconds uses WAY more processing power, although it shouldn't cause problems unless the computer 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
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):
I would like to use this great and accurate code in more than one web page and therefore would prefer not to have to add the code to each page but use an include
i.e. in the header I include <script src="inc/mycountdown.js"></script>
which I can do but I don't know how to get results to display where I specify.
I have tried various methods but not knowledgable enough to implement successfully.
i.e. tested output methods
You can put the entire script in your external file (pretty much just leave it as-is. you can leave the onload in it). In your page where you want to display the countdown, just put: <div id="countbox6"></div>
first many thanks for the counter. It's what i've been looking for.
But is it possible to change the design?
I want to change the font to bold, bigger font size and the color from black to gold.
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:#FFFF00;font-weight:bold;"></div>
Hi, i'm really good with html and css but i don't understand a lot about javascript. I will want to add a "-" before days number (ex: - 19 Days). How can i do that ? if i add the conde inside the DIV it dosen't appear. Thanks-.
Just adding it to the div will get replaced every time it updates. You need to change: if(days != 0){out += days +" "+((days==1)?"day":"days")+", ";}to if(days != 0){out += "-"+ days +" "+((days==1)?"day":"days")+", ";}
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?
Well, it wasn't really made to support it, but in the wording for each, you could plug in HTML and the wording as long as it does not contain a " quote symbol. eg plug in; <span style='color:red'>mins</span>
thank you for this wonderful and easy to use js! so easy to implement. have used this script on our wordpress site.
in the content area of the wordpress, the script should be placed in the HEAD area of your wordpress template then call the script something like:
i made it a "span" instead of "div" so that the texts is inline with the countdown timer. with that span, you can also style it with what you want. just add the css style to it.
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?
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;
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!
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.
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!"; }
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?
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.
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.
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
When doing the math, the computer is smart enough it will adjust for Daylight-Savings-Time. October 15 is during DST and December 23 is not in DST. So you technically do have an extra odd hour gained in there which will make them expire at the same "hour" even though one is an hour later clock-time.
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
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.
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 so you'll need to manually convert your expires time (note: PHP also uses 1-12 months instead of 0-11 like Javascript).
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?
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.
Comments
Adding new rules for names of days
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, ";}
Countdown
I would like to use this great and accurate code in more than one web page and therefore would prefer not to have to add the code to each page but use an include
i.e. in the header I include
<script src="inc/mycountdown.js"></script>which I can do but I don't know how to get results to display where I specify.
I have tried various methods but not knowledgable enough to implement successfully.
i.e. tested output methods
<script><div id="countbox6"></div></script><script>window.onload=function(){GetCount(dateFuture1, 'countbox6');}</script>
BUT I am sure there is a way!!!
Appreciate your time and expertise; Jim
Answer
You can put the entire script in your external file (pretty much just leave it as-is. you can leave the onload in it). In your page where you want to display the countdown, just put:
<div id="countbox6"></div>How to change the design
High,
first many thanks for the counter. It's what i've been looking for.
But is it possible to change the design?
I want to change the font to bold, bigger font size and the color from black to gold.
Answer
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:#FFFF00;font-weight:bold;"></div>QUICK Q?
how would i center the countdown on my page...its flushing from the left right now?
Answer
You can center the countdown by changing the last line in the code to something like:
<div id="countbox1" style="text-align:center;"></div>Marco
Hi, i'm really good with html and css but i don't understand a lot about javascript. I will want to add a "-" before days number (ex: - 19 Days). How can i do that ? if i add the conde inside the DIV it dosen't appear. Thanks-.
Answer
Just adding it to the div will get replaced every time it updates. You need to change:
if(days != 0){out += days +" "+((days==1)?"day":"days")+", ";}toif(days != 0){out += "-"+ days +" "+((days==1)?"day":"days")+", ";}Changing the design on each element
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?
Answer
Well, it wasn't really made to support it, but in the wording for each, you could plug in HTML and the wording as long as it does not contain a " quote symbol. eg plug in;
<span style='color:red'>mins</span>Thank you! - how to implement on a wordpress site.
thank you for this wonderful and easy to use js! so easy to implement. have used this script on our wordpress site.
in the content area of the wordpress, the script should be placed in the HEAD area of your wordpress template then call the script something like:
<span id="countbox1" style="font-weight:bold;"></span>i made it a "span" instead of "div" so that the texts is inline with the countdown timer. with that span, you can also style it with what you want. just add the css style to it.
again, thanks!
- g_u-i-l_l-i-a_m
Making different classes for each element
Hey,
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?
Answer
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")+", ";
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>";
Adding a URL to the message
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;Auto Renew Daily
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!
Answer: Automatically reset countdown after expires
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.
Countdown layout question
I have the clock code inserted and it's displaying the clock accurately. However, the actual layout of the time fields is inconsistent.
I want it laid out so that it has each clock item on a different line, centered in the divider:
33 Days
18 hours
54 mins
43 secs
I don't see a way to get this to work with CSS, but perhaps you can inform me.
Answer
Countdown to "Today" and then "Passed"
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?
Answer
If you want to show a different message for "today" you can replace:
if(amount < 0){document.getElementById(iid).innerHTML="Now!";
}
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!";
}
Question: Adjusting for timezone
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!
Answer
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.
How to add multiple countdowns
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.
Answer
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>
Bug ?
Hello,
have tested the above script for multiple countdowns. It seems that there exists a bug.
I have used:
dateFuture1 = new Date(2011,11,23,18,00,00);
dateFuture2 = new Date(2016,9,15,19,00,00);
Unfortunately both boxes shows the same "hour". Although first timer should start at 6pm and second at 7pm, both shows the same result for hours.
Answer
When doing the math, the computer is smart enough it will adjust for Daylight-Savings-Time. October 15 is during DST and December 23 is not in DST. So you technically do have an extra odd hour gained in there which will make them expire at the same "hour" even though one is an hour later clock-time.
Question: Changing page if expired
Is there anyway when the time runs out instead of showing text it can jump to another page?
Answer
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.htmlQuestion: Changing the expired message
Hi is there anyway I can have it display a piece of text/html when the timer reaches 0?
Answer
Using the server clock
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.
Answer: Using PHP to get the server time
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();// modified for int instead of JS date objectamount = 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 so you'll need to manually convert your expires time (note: PHP also uses 1-12 months instead of 0-11 like Javascript).
Question: Different Labels with multiple countdowns
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?
Answer
To add custom labels on two countdowns, change:
document.getElementById(iid).innerHTML=out;toif(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
New v2.0 released
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.