You can use the following generator to create a countdown clock that will count down the seconds, minutes, hours, days remaining until your target date.
Note
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="countbox" style="font:14pt Arial; color:#FF0000;"></div>
Great stuff but I see in the code: kill the miliseconds... now i don't want to kill them.
How would the code look like if I want to have miliseconds as the smallest time ?
You can do it.
(1) remove the milliseconds killing
(2) increase all the other math by a factor of 1000 to compensate
(3) print out the milliseconds
So change:
amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs
You'll also want to increase how often the timer is updated. So instead of updating once every 1 second (1000 millisecs): setTimeout("GetCount()", 1000);change it to update every 10 millisecs (you can make it update faster/slower as you want. but the faster it updates, the more processing power it uses on the visitors computer) : setTimeout("GetCount()", 10);
Great gadget! I'm going to integrate it into my blogspot but I am also looking for an expansion that shows the date since. For example, I arrived in Berlin on August 4 and I want the timer to show how many days/hours it has been since I arrived. So before I arrive in Berlin it would show how many days until I get there but once I have reached that time it would then show the days since instead of the "Now!" message, which is the current default. If you have any suggestions as to how that could be achieved that would be awesome, otherwise I will carry on searching for the answer and will post back when I find it. *bookmarked*
I added a link at the top (here also) to a version that will count back up once the date expires. This is actually a really good idea and I might include a "behavior" option in a future version of the generator. But for now you'll need to copy & paste without the generator.
for my purpose i just want it to show how many days and hours. not the minutes or seconds. i couldn't figure out how to get rid of that. i was deleting stuff out of the html and it would either turn minutes and seconds to "infinity" or "00" or the entire script would disappear.
You need to remove the two lines that calculate minutes and seconds:
if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";} out += secs +" seconds";
and change the hours line (so it will always show and not have the comma at the end) from: if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}to out += hours +" hour"+((hours!=1)?"s":"");
Is there a way to modify the script to show remaining days in the hour total instead of displaying days, such as "36 hours" instead of "1 day 12 hours" remaing? Thanks again!
How can I get two of these on the same page? I've tried changing the function names and calls, and the element thing, but now I've got the second one working and the first one not appearing!
There are 3 places in the script you'll need to edit. Search the source on the above link for the word "CHANGE" and you should be able to find all 3. You can move the output boxes like <div id="countbox1"></div> to wherever you want the countdown to appear on the page (they don't need to be in the same place).
If you have trouble calculating the "dateFuture" you need for each countdown, use the generator on this page then copy and paste the "new Date" line into the script (just make sure you change it to a dateFuture<digit> name on each one.)
Comments
Question: With milliseconds
Hi,
Great stuff but I see in the code: kill the miliseconds... now i don't want to kill them.
How would the code look like if I want to have miliseconds as the smallest time ?
thanks!!
Answer: Showing milliseconds in timer
You can do it.
(1) remove the milliseconds killing
(2) increase all the other math by a factor of 1000 to compensate
(3) print out the milliseconds
So change:
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
//amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs
days=Math.floor(amount/86400000);//days
amount=amount%86400000;
hours=Math.floor(amount/3600000);//hours
amount=amount%3600000;
mins=Math.floor(amount/60000);//minutes
amount=amount%60000;
secs=Math.floor(amount/1000);//seconds
amount=amount%1000;
secs+="."+amount;//millisec
You'll also want to increase how often the timer is updated. So instead of updating once every 1 second (1000 millisecs):
setTimeout("GetCount()", 1000);change it to update every 10 millisecs (you can make it update faster/slower as you want. but the faster it updates, the more processing power it uses on the visitors computer) :setTimeout("GetCount()", 10);Question: Date since experation
Great gadget! I'm going to integrate it into my blogspot but I am also looking for an expansion that shows the date since. For example, I arrived in Berlin on August 4 and I want the timer to show how many days/hours it has been since I arrived. So before I arrive in Berlin it would show how many days until I get there but once I have reached that time it would then show the days since instead of the "Now!" message, which is the current default. If you have any suggestions as to how that could be achieved that would be awesome, otherwise I will carry on searching for the answer and will post back when I find it. *bookmarked*
Answer - Countdown, then count back up
I added a link at the top (here also) to a version that will count back up once the date expires. This is actually a really good idea and I might include a "behavior" option in a future version of the generator. But for now you'll need to copy & paste without the generator.
Question: I want to get rid of the minutes and seconds
for my purpose i just want it to show how many days and hours. not the minutes or seconds. i couldn't figure out how to get rid of that. i was deleting stuff out of the html and it would either turn minutes and seconds to "infinity" or "00" or the entire script would disappear.
Answer: Removing minutes and seconds in the display
You need to remove the two lines that calculate minutes and seconds:
if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";}out += secs +" seconds";
and change the hours line (so it will always show and not have the comma at the end) from:
if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}toout += hours +" hour"+((hours!=1)?"s":"");Question: Countdown by hours instead of days
First thanks a ton for the script!
Is there a way to modify the script to show remaining days in the hour total instead of displaying days, such as "36 hours" instead of "1 day 12 hours" remaing? Thanks again!
Answer: Removing days in the display
You can make it show the amount in hours instead of days fairly easily. Just remove these two lines:
days=Math.floor(amount/86400);//daysamount=amount%86400;
Question: Two on the same page
How can I get two of these on the same page? I've tried changing the function names and calls, and the element thing, but now I've got the second one working and the first one not appearing!
Answer: Multiple countdowns
multiple countdown times on one page
There are 3 places in the script you'll need to edit. Search the source on the above link for the word "CHANGE" and you should be able to find all 3. You can move the output boxes like <div id="countbox1"></div> to wherever you want the countdown to appear on the page (they don't need to be in the same place).
If you have trouble calculating the "dateFuture" you need for each countdown, use the generator on this page then copy and paste the "new Date" line into the script (just make sure you change it to a dateFuture<digit> name on each one.)