Countdown Timer v1

Warning: Abandoned
This page/script has been classified as abandoned and will no longer be updated. I will keep this page here indefinitely as a reference, but it will no longer be updated and I no longer offer support of any kind regarding content found on this page.

Description

This generator has been abandon in favor of HTML Date with Countdown Timer v2. As such, I am putting the comments as read-only on this page

Note



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



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

Comments

June 9, 2010 - 12:17pm — Anonymous

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!

June 9, 2010 - 7:34pm — ricocheting

You'll need some basic HTML knowledge, but I created a modified that allows you to easily create multiple unlimited countdowns on the same page.

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

February 25, 2011 - 6:45pm — Clivef

Hi
I have created a multi countdown timer which works fine, only problem is how do I position each result to where I want it to appear. Whilst I have read your answer in the June 9 2010 post, as follows "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 to wherever you want the countdown to appear on the page (they don't need to be in the same place)", I can't work out how to us it.
Can you help any further.
Many thanks.
Clive

July 31, 2010 - 4:09pm — Anonymous

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!

August 16, 2010 - 3:56pm — Anonymous

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.

August 16, 2010 - 7:35pm — ricocheting

There are 4 lines that create the days, hours, minutes, and seconds that display
if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";}
out += secs +" seconds";
  • Delete the lines you want to remove. The lines in descending order are days, hours, minutes, seconds (eg; so I remove the last two min & sec lines)
  • Whatever line is now last in the timer should always show (eg; with min and sec gone, hour always needs to show. even if it's zero). You need to remove the entire if(){} condition that checks if it is zero so
    if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
    becomes -- don't forget to remove the closing }
    out += hours +" hour"+((hours!=1)?"s":"")+", ";
  • For looks you'll likely also want to remove the tailing comma on the last line so it now becomes
    out += hours +" hour"+((hours!=1)?"s":"")+"";

August 24, 2010 - 7:51am — Anonymous

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*

August 24, 2010 - 12:01pm — ricocheting

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.

August 27, 2010 - 6:16am — Anonymous

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!!

August 31, 2010 - 10:28pm — ricocheting

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
to:
//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);

September 3, 2010 - 5:39pm — Anonymous

I'm trying to add the text "Sale ends in" before the countdown but it's just not happening for me. Right now it shows up, but then disappears and is replaced with the counter.

September 3, 2010 - 7:45pm — ricocheting

The original code:
document.getElementById('countbox').innerHTML=out;
to add text at the beginning:
document.getElementById('countbox').innerHTML="Sale ends in "+out;
If you want to add text at the end:
document.getElementById('countbox').innerHTML=out+" days to go";

September 12, 2010 - 5:45am — Anonymous

As the time counts down the days, hours disappear from sight. In stead is it possible to have the countdown display 00 days, 00 hours, 53 minuets as it counts down coming closer to the expire date ?

Really great tool you have created, I only which i know more about JavaScript!

September 12, 2010 - 5:28pm — ricocheting

To keep the zero values, change

if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";}
to
out += days +" day"+((days!=1)?"s":"")+", ";
out += hours +" hour"+((hours!=1)?"s":"")+", ";
out += mins +" minute"+((mins!=1)?"s":"")+", ";

September 20, 2010 - 2:42pm — Anonymous

Thanks so much for this helpful tool! :) I want my counter to only show days, no hours, minutes, etc. How can I do this? Thanks in advance for your help!

September 23, 2010 - 12:56pm — ricocheting

To have the countdown ONLY show days remove these 3 lines:

if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";}
out += secs +" seconds";

and change the days from:
if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
to (makes it always show and removes the comma):
out += days +" day"+((days!=1)?"s":"");

September 23, 2010 - 11:53am — Anonymous

Say i use this script as a countdown timer for a website that i am about to launch.
Would it be possible once the timer reaches the date and time set, instead of displaying NOW! reload the page with a new page.

Like i have a underconstruction index.php page
once time is reached the index.php page is reloaded with index2.php wich is the sites page that is launched?

September 23, 2010 - 12:51pm — ricocheting

change:
document.getElementById('countbox').innerHTML="Now!";to:
window.location="index2.html";

be aware it's not secure or anything. 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

October 13, 2010 - 9:06am — Anonymous

Hi, i was wondering, how to change the time zone so the countdown fits my time?

October 15, 2010 - 3:05pm — ricocheting

Near the top directly under your dateFuture line, add these new lines:

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

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

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

[edit: 2010-11-15] fixed a bug in my math pointed out by user

October 14, 2010 - 1:11am — Anonymous

Great tool, almost exactly what I`m looking for. Is it possible to make a 24h countdown, let the tool change a number on the page on expiration (for example add 100 to it) and then automatically resart the whole thing for the next 24h? Because that is exactly what I need.

October 15, 2010 - 2:26pm — ricocheting

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

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

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

November 12, 2010 - 5:17pm — Anonymous

Love this site! So helpful. But is there a way to add a background image to this code? So for example I have a background image of 970 x 38px I want to set as the background behind the ticker. Is this possible? Thanks so much.

November 15, 2010 - 9:09pm — ricocheting

change the last line on the script to add CSS code for your background image. like:
<div id="countbox" style="width:970px; height:38px; background:url('http://www.google.com/intl/en_ALL/images/srpr/logo1w.png');"></div>

November 15, 2010 - 10:32pm — knarfor

How would I keep a set number of number places for each time unit? For instance, instead of displaying "1" I'd like it to always have two places "01". That would apply to days, hours, minutes, and seconds. Then I'd like three places for milliseconds ("001" instead of "1").

November 23, 2010 - 1:53pm — ricocheting

To make all the numbers (days, hours, mins, secs) always show as 2 digit numbers change:
if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";}
out += secs +" seconds";
to:
if(days != 0){out += (days<=9?'0':'')+days+" day"+((days!=1)?"s":"")+", ";}
if(days != 0 || hours != 0){out += (hours<=9?'0':'')+hours+" hour"+((hours!=1)?"s":"")+", ";}
if(days != 0 || hours != 0 || mins != 0){out += (mins<=9?'0':'')+mins+" minute"+((mins!=1)?"s":"")+", ";}
out += (secs<=9?'0':'')+secs+" seconds";

November 24, 2010 - 6:45am — Anonymous

Hi there, I was trying to figure out a way to get the countdown into a table layout so that it resembles a stopwatch look. The first cell has ## Days, then the following has ## Hrs, and so on... is there a way to make the Java populate the countdown within a table cell layout?

November 24, 2010 - 11:51am — ricocheting

You need to assign an ID to each cell in the table you want it to write to:

<table border="0" cellspacing="0" cellpadding="3">
  <tr>
    <td id="box_days">(## Days)</td>
    <td id="box_hours">(## Hrs)</td>
    <td id="box_mins">(## Mins)</td>
    <td id="box_secs">(## Secs)</td>
  </tr>
</table>

Then change it to write each individual part to the ID of that cell. so change:
if(days != 0){out += days +" Day"+((days!=1)?"s":"")+" ";}
if(days != 0 || hours != 0){out += hours +" Hr"+((hours!=1)?"s":"")+" ";}
if(days != 0 || hours != 0 || mins != 0){out += mins +" Min"+((mins!=1)?"s":"")+" ";}
out += secs +" Secs";
document.getElementById('countbox').innerHTML=out;
to
document.getElementById('box_days').innerHTML = days +" Day"+((days!=1)?"s":"")+" ";
document.getElementById('box_hours').innerHTML = hours +" Hr"+((hours!=1)?"s":"")+" ";
document.getElementById('box_mins').innerHTML = mins +" Min"+((mins!=1)?"s":"")+" ";
document.getElementById('box_secs').innerHTML = secs +" Secs";

January 20, 2011 - 7:20pm — ricocheting

change:
if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";}
out += secs +" seconds";
to (replacing the bold/cap words with whatever language you want):
if(days != 0){out += days +" DAYS, ";}
if(days != 0 || hours != 0){out += hours +" HOURS, ";}
if(days != 0 || hours != 0 || mins != 0){out += mins +" MINUTES, ";}
out += secs +" SECONDS";

January 23, 2011 - 10:18pm — Anonymous

I'd like there to be an additional section for "weeks" left until the event. How do I do this?

January 25, 2011 - 9:28pm — ricocheting

Add

weeks=Math.floor(amount/604800);//weeks
amount=amount%604800;
right ABOVE the similar section that calculates the days (so BETWEEN "kill the miliseconds" and "days"). and add
if(weeks != 0){out += weeks +" week"+((weeks!=1)?"s":"")+", ";}right ABOVE the existing
if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}

March 2, 2011 - 1:17pm — Anonymous

Hello! I'm trying to make the script to pull the "dateFuture = new Date(2011,2,2,19,34,20);" value from an external file. Say i made a .txt file containing "2011,2,2,19,34,20", how would i tell the script to fill in the brackets with that value?

March 2, 2011 - 2:58pm — ricocheting

It's safe to move the dateFuture line to an external .js file (make sure you also remove the dateFuture line from the current script):

//contents of stored_date.js
dateFuture = new Date(2011,2,2,19,34,20);
and then on the main page, call that external js file to load the dateFuture value:
<script type="text/javascript" src="stored_date.js"></script> where "stored_date.js" is the file name/path.

March 19, 2011 - 1:16pm — BonJoviFan

I just recently looked at this code, and it works great, however I'm trying to understand it a bit farther. I understand it completely up until line 36. I am lost at where you got these numbers from: 1000, 86400, 3600, 60, along with why you got the modulus of the amount and those numbers. If somebody could please reply to this post soon, that would be greatly appreciated.

March 23, 2011 - 3:51pm — ricocheting

1000 = number of milliseconds in a second. I'm changing amount (milliseconds) to amount (seconds)
86400 = number of seconds in a day. getting how many full days exist in amount then using modulus to shove any remaining value back into amount
3600 = number of seconds in an hour so I can get how many full hours remain, and so on