Need A Repeating Countdown Timer

Hi guys. I'm making a webpage for a school project and I need help modifying this timer here:

http://web.mac.com/rkuhnhenn/Countdown_Timers/Style_3b.html

I want it to countdown from 48 hours, and as soon as it counts down, I need it to reset. I need an endless countdown of 48 hours.

How can I go about doing that?


Thanks guys, your help is highly appreciated.

Voila.

<script type = "text/javascript">

var timeInSecs;
var ticker;

function startTimer(secs) {
timeInSecs = parseInt(secs);
ticker = setInterval("tick()", 1000);
}

function tick( ) {
var secs = timeInSecs;
if (secs > 0) {
timeInSecs--;
}
else {
clearInterval(ticker);
startTimer(172800); // start again
}

var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var pretty = ( (hours < 10 ) ? "0" : "" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins + ":" + ( (secs < 10) ? "0" : "" ) + secs;
document.getElementById("countdown").innerHTML = pretty;
}

startTimer(172800); // 48 hours in seconds

</script>

<span id="countdown" style="font-weight: bold;"></span>


“I am so clever that sometimes I don't understand a single word of what I am saying.” - Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)

hey i really badly need this same exact thing but counting down 18 minutes. so i need it to start at 18 minutes and reset every time it reaches 0...but can you also make one to go with it that counts up +1 every 18 minutes starting at 0? it's for a suicide help/prevention website so it's very important

Just use
startTimer(18*60); // 18 minutes in seconds
in the two places where he has
startTimer(172800);

***********

What do you mean "count up by +1"???

You mean increase 18 minutes to 19? And then to 20? Or what?

What is so special about 18 minutes? If you explained your purpose more clearly people would be better able to assist you.

alright by plus 1 i mean that belo the 18 minute count down timer there is another counter that starts at 0 and increases by 1 every 18 minutes. so it counts how many times the 18 minute count down timer has reached 0.

sorry to complicate this but i need it to work in a custom html editor as used at webs.com for editing.

No idea why the custom HTML editor would impact JS code.

But the answer to your count up is simple:

var upCount = -1;
function startTimer(secs)
{
document.getElementById("UpCounter").innerHTML = "count is now " + (++upCount);
timeInSecs = parseInt(secs);
ticker = setInterval("tick()", 1000);
}
...
and then someplace on your page, where you want it, you have
<div id="UpCounter"></div>
*OR*
<span id="UpCounter"></span>

well i don't know wats happening but i put the two different things into seperate html's an this is what showed up on the webpage...

var upCount = -1; function startTimer(secs) { document.getElementById("UpCounter").innerHTML = "count is now " + (++upCount); timeInSecs = parseInt(secs); ticker = setInterval("tick()", 1000); } ... and then someplace on your page, where you want it, you have

*OR* var timeInSecs; var ticker; function startTimer(secs) { timeInSecs = parseInt(secs); ticker = setInterval("tick()", 1000); } function tick( ) { var secs = timeInSecs; if (secs > 0) { timeInSecs--; } else { clearInterval(ticker); startTimer(1080); // start again } var hours= Math.floor(secs/3600); secs %= 3600; var mins = Math.floor(secs/60); secs %= 60; var pretty = ( (hours < 10 ) ? "0" : "" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins + ":" + ( (secs < 10) ? "0" : "" ) + secs; document.getElementById("countdown").innerHTML = pretty; } startTimer(1080); // 18 minutes in seconds

well i don't know wats happening but i put the two different things into seperate html's an this is what showed up on the webpage...

var upCount = -1; function startTimer(secs) { document.getElementById("UpCounter").innerHTML = "count is now " + (++upCount); timeInSecs = parseInt(secs); ticker = setInterval("tick()", 1000); } ... and then someplace on your page, where you want it, you have

*OR* var timeInSecs; var ticker; function startTimer(secs) { timeInSecs = parseInt(secs); ticker = setInterval("tick()", 1000); } function tick( ) { var secs = timeInSecs; if (secs > 0) { timeInSecs--; } else { clearInterval(ticker); startTimer(1080); // start again } var hours= Math.floor(secs/3600); secs %= 3600; var mins = Math.floor(secs/60); secs %= 60; var pretty = ( (hours < 10 ) ? "0" : "" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins + ":" + ( (secs < 10) ? "0" : "" ) + secs; document.getElementById("countdown").innerHTML = pretty; } startTimer(1080); // 18 minutes in seconds

alrght right after i posted i reread the second code an realized it wasn't all code so that's solved.
but the rest isn't solv

I gather that English is not your native language. Sorry if I wasn't clear. I'll try again.

The part in blue here is just MY COMMENTS TO YOU

The part in green here goes SOMEPLACE on your web page and should *NOT* be part of the javascript code.

Also, you can only use ONE of the two choices in green. You can *NOT* use both of them.


and then someplace on your page, where you want it, you have
<div id="UpCounter"></div>
*OR*
<span id="UpCounter"></span>

And then ONLY this code is JavaScript, and it *REPLACES* the function startTimer() as you showed that function in your post. It should *NOT* be put in a separate page or file or whatever. It is a *change* to your existing code.

var upCount = -1;
function startTimer(secs)
{
document.getElementById("UpCounter").innerHTML = "count is now " + (++upCount);
timeInSecs = parseInt(secs);
ticker = setInterval("tick()", 1000);
}

Oh, sorry...it's a change to the code that PhilipM posted, that is.

alright english is my native language but my computer lags and misses keys and i was talking to someone while typing, and when i copied the code i was also talking then so i didn't read it and then realized afterwards that i copied the wrong things. but the original code at the top of the page wheni use it, the webpage just shows the code, even whe i put it into an html editor..

ok so this change, am i replacing the entire original code? or am i adding it to the bottom?

Look, I don't know what HTML editor you are using, but it sounds like it is messing you over more than it is helping you.

Shut it down, temporarily at least, and just open up the page in a text editor, such as NOTEPAD.

As far as the code goes: You are taking the code PhilipM posted and replacing *ONLY* the part that I showed you. ONE FUNCTION. Replacing. Not adding.

This is, of course, in addition to changing that number from whatever it was to 18*60 for 18 minutes worth of seconds.

alright english is my native language but my computer lags and misses keys and i was talking to someone while typing, and when i copied the code i was also talking then so i didn't read it and then realized afterwards that i copied the wrong things. but the original code at the top of the page wheni use it, the webpage just shows the code, even whe i put it into an html editor..

No comment.

But the code I posted actually originated with Old Pedant.

LOL! Really?

Sheesh...I don't remember it at all.

Guess the emphasis is on "Old" and not on "Pedant".

Senility sets in.

[Well, I guess I recognize the variable naming. Especially "pretty = ..." But the rest of it...]

[Well, I guess I recognize the variable naming. Especially "pretty = ..." But the rest of it...]

Well, I probably improved/reworked it a bit!

Okay, let's just make a *COMPLETE* web page to demo that it really does work.

I created this in NOTEPAD. You should copy/paste the code from here into Notepad (or a similar text-only editor). Save the file as "timer.html" (or whatever name you want to play with) and bring the page up in your browser.

It's not pretty. It's not fancy. It just does its job.

You can change the value of the MINUTES variable (which is treated as a constant) to whatever you want (e.g., 18). I just made it 1 so you could more easily see that it works.

<html>
<head>
<script type = "text/javascript">
var MINUTES = 1; // change this to the number of minutes you want to count down.

var timeInSecs;
var ticker;
var upCount = -1;
function startTimer(secs)
{
++upCount;
document.getElementById("COUNTUP").innerHTML
= "We have counted down " + MINUTES + " minute(s) a total of " + upCount + " times.";
timeInSecs = parseInt(secs);
ticker = setInterval("tick()", 1000);
tick( ); // get the display started right away
}

function tick( )
{
var secs = timeInSecs--;
if (secs <= 0)
{
clearInterval(ticker);
startTimer(MINUTES*60);
return;
}

var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var pretty = ( (hours < 10 ) ? "0" : "" ) + hours
+ ":" + ( (mins < 10) ? "0" : "" ) + mins
+ ":" + ( (secs < 10) ? "0" : "" ) + secs;
document.getElementById("countdown").innerHTML = pretty;
}

</script>
</head>
<body onload="startTimer(MINUTES*60);">
Countdown timer: <span id="countdown" style="font-weight: bold;"></span>
<br/><br/>
<span id="COUNTUP"></span>
</body>
</html>

After (a) seeing that it works and (b) understanding HOW it works, *THEN* you can try using the HTML editor you have to muck with the page. And if that editor messes it up, then go find another editor.

I am adding a countdown timer to a blog for a friend that is starting a new job on a tugboat. He is gone for 28 days, then returns home for 28 days. I need a countdown timer that will reset every 28 days when it gets to 0. I understand how to change the seconds on the original code to the number of seconds in 28 days. What I would like to see on the display is this:

I leave in:
21 days, 11 hours, 51 minutes, 17 seconds

Then when it resets for the next 28 day cycle I would like it to read:

I will be home in:
21 days, 11 hours, 51 minutes, 17 seconds

I would like to be able to put a date in to start the countdown. He starts the job dec 7 but his 28 days does not start till he completes some training.

Hope this makes sense. Thanks for any help you can give me.

You need server side scripting to do this, as any Javascript will reset the clock when the page reloads.
Or you could specify the date and time that the countdown was to end, which will of course survive page reloads.

Do you really want to show minutes and seconds? Seems a bit precise for a boat!

This might move you forward:-

<div id = "msg"></div>

<script type = "text/javascript">

function showTime() {
today = new Date();
BigDay = new Date("December 25, 2009");
msPerDay = 24 * 60 * 60 * 1000 ;
timeLeft = (BigDay.getTime() - today.getTime());
e_daysLeft = timeLeft / msPerDay;
daysLeft = Math.floor(e_daysLeft);
e_hrsLeft = (e_daysLeft - daysLeft)*24;
hrsLeft = Math.floor(e_hrsLeft);
minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60);

document.getElementById("msg").innerHTML = "There are only <br> <h4>" + daysLeft + " days " + hrsLeft +" hours and " + minsLeft + " minutes left </h4> Until December 25th 2009"

setTimeout("showTime()", 1000*60); // update every minute
}

showTime();
</script>

Thanks..this sould get me started. It did not have to be that detailed down to the seconds. Its just a fun thing for his blog.

You guys are great! Thanks again.

Hi, First of all thank you for the code. It's the closest thing I have found to what I have been looking for. But I have a problem...

On my site, I have 4 events taking place every day (24 hours). There is a gap of exactly 6 hours between each event. All that the visitor will see is 'Next Event starts in HH:MM'. I need a code that simply counts down 6 hours then restarts. Thought I'd hit the jackpot when I came across this code, but this resets each time the page is loaded :(

As per what Philip M says above, I assume adding a start date/time into the code would fix this but have been unsuccessful.

Please help.

John R - please do not hijack someone else's thread. You should start your own new thread.

What you require really needs server-side scripting. As you say, refreshing the page will start the Javascript counter afresh. You can only overcome that with a cookie which is set on page unload, and recovered on page load. Be aware that many people block or erase cookies.

But why do you want to complicate things? Why not simply say "The next event will begin at 12.00 noon (or whatever)? Why must the user work out what the time will be in 3 hours 27 minutes? Does your wife say that tonight dinner will be served in 5 hours 24 minutes?


"...there are indications that the severest phase of the recession is over..."
- Harvard Economic Society (HES) Jan 18, 1930

My sincere apologies sir. I did not realise I was hijacking a thread. I'm asking for some help on the code the OP asked for many months ago and since has had a couple of additions.

What I ask is also an addition to the original code, that could also help someone else in the future so I thought I'd keep it in one thread for reference sake.

In reference to complications. The page is accessed by many all over the world and the one thing they are all looking for is how long until the next event. The events are hosted GMT but we all know a lot of people can't keep up with the simple addition or subtraction of a number of hours based on their local time. Therefore a simple count down will solve any issues.

and my wife doesn't do the cooking :)

Well you can get the user's local time as follows:-


<script type = "text/javascript">
ourDate = new Date();
document.write("The time and date at your computer's location is: "
+ ourDate.toLocaleString()
+ ".<br/>");
document.write("The time zone offset between local time and GMT is "
+ ourDate.getTimezoneOffset()
+ " minutes.<br/>");
document.write("The time and date (GMT) is: "
+ ourDate.toGMTString()
+ ".<br/>");
</script>

And then display the next event time based on that. So, for example, the
next event time might be displayed as 2100 GMT and 1600 EST.

But as I say, you really should do this server-side.

and my wife doesn't do the cooking
Well, what is she for, then? :D:D

Thank you for the input. I'm looking more into the server side as you was typing that response. A time stamp entry to draw on from db may be the best way forward.

ah the wife has many functions but the kitchen remains my area :thumbsup::D

Not sure why you need a DB.

If your start times are as regular as you say, all you really need to do is send the *current server time* to the client. It would probably be handy to adjust that time on the server to be GMT, but that's not strictly necessary.

What kind of server? PHP/ASP/JSP/what??

Tell me the kind of server and what the 4 times of day are when each new event starts. Piece of cake code after that.

Here is a Javascript solution, but of course it relies on the accuracy of the user's clock. However, if you obtain the server time, then the same script would do what you want regardless of time zones or user's clock.

var now = <?php print (gmdate(DATE_RFC822)) ; ?>


<html>
<head>

Assume updates are at 0000, 0600, 1200, 1800 <br><br><br>

<script type = "text/javascript">

function getSeconds() {
var now = new Date();
var hh = now.getHours();
var mn = now.getMinutes();
var ss = now.getSeconds();
var secsToNow = (hh * 3600) + (mn * 60) + ss;
secsToGo = 86400 - secsToNow;
secsToGo = secsToGo%21600; // next 6 hours interval
startTimer(secsToGo);
}

var timeInSecs;
var ticker;

function startTimer(secs){
timeInSecs = parseInt(secs);
ticker = setInterval("tick()",1000);
tick(); // to start counter display right away
}

function tick() {
var secs = timeInSecs;
if (secs>0) {
timeInSecs--;
}
else {
clearInterval(ticker); // stop counting at zero
//getSeconds() // and start again if required
}

var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var result = "The next update will be in " + hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins
+ " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds";
document.getElementById("countdown").innerHTML = result;
}

</script>

</head>

<body onload = "getSeconds()">

<span id="countdown" style="font-weight: bold;"></span>

</body>
</html>

In Philip's code, you would only need to replace the line
var now = new Date();

with code the initializes the now variable with data from the server.

An easy way to do that is something like this (example using ASP server)

<%
Dim t : t = Now()
%>
var now = new Date(<%=Year(t)&","&Month(t)&","&Day(t)&","&Hour(t)&","&Minute(t)&","&Second(t)%>);

though since Now() gets local server time with ASP, you'd probably want to adjust it for GMT. So maybe something like

<%
Dim t : t = DateAdd("h",5,Now()) ' get GMT based on US EST
%>

I think that it's 5 hours diff, EST to GMT.

I think that it's 5 hours diff, EST to GMT.

Yes, that is so right now. But Daylight Saving Time can confuse things. But he is not showing an actual time, but rather the time remaining until the next event. So long as it is consistent the actual time does not matter.

He can of course use var hh = now.getUTCHours(); and so on (regardless of his or his users' actual time zone), but that still relies on the accuracy of the browser's clock.

Voila.

<script type = "text/javascript">

var timeInSecs;
var ticker;

function startTimer(secs) {
timeInSecs = parseInt(secs);
ticker = setInterval("tick()", 1000);
}

function tick( ) {
var secs = timeInSecs;
if (secs > 0) {
timeInSecs--;
}
else {
clearInterval(ticker);
startTimer(172800); // start again
}

var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var pretty = ( (hours < 10 ) ? "0" : "" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins + ":" + ( (secs < 10) ? "0" : "" ) + secs;
document.getElementById("countdown").innerHTML = pretty;
}

startTimer(172800); // 48 hours in seconds

</script>

<span id="countdown" style="font-weight: bold;"></span>
“I am so clever that sometimes I don't understand a single word of what I am saying.” - Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)


Can this be built onto? I would like to control the font and the size of the font. Also would like to ad text.

This is the second time that this thread has been hijacked. :(

Yes, of course you can control the font and its size using normal CSS.

<span id="countdown" style="color:red; font-size:24px; font-style:italic; font-weight:bold;"></span>

You can add text to the variable pretty.

Voila.

<script type = "text/javascript">

var timeInSecs;
var ticker;

function startTimer(secs) {
timeInSecs = parseInt(secs);
ticker = setInterval("tick()", 1000);
}

function tick( ) {
var secs = timeInSecs;
if (secs > 0) {
timeInSecs--;
}
else {
clearInterval(ticker);
startTimer(172800); // start again
}

var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var pretty = ( (hours < 10 ) ? "0" : "" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins + ":" + ( (secs < 10) ? "0" : "" ) + secs;
document.getElementById("countdown").innerHTML = pretty;
}

startTimer(172800); // 48 hours in seconds

</script>

<span id="countdown" style="font-weight: bold;"></span>


“I am so clever that sometimes I don't understand a single word of what I am saying.” - Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)

I installed the script in my webpage. It counts down ok when I call up the webpage on my browser, but if I close the page and then reopen it, it starts the countdown all over again from the beginning.
Help!

I installed the script in my webpage. It counts down ok when I call up the webpage on my browser, but if I close the page and then reopen it, it starts the countdown all over again from the beginning.
Help!

Well, yes. What did you expect?

As I said in post#2, "You need server side scripting to do this, as any Javascript will reset the clock when the page reloads. Or you could specify the date and time that the countdown was to end, which will of course survive page reloads."

"It ain't what you don't know that gets you into trouble. It's what you know for sure that just ain't so." - Mark Twain, US humorist, novelist, short story author, & wit (1835 - 1910)

Thanks to everyone for the helpful information on this.

Is there a way to build in some sort of notifier or alarm when the timer runs out each time? I am flexible on what it is, but maybe something like the screen flashes red and a general alert sound is triggered? Both visual and audio would be great but audio is probably the most important.

Here is the page where I am implementing this, for reference: http://heyjk.com/powerhour/

Thanks again for any help.

you can get the screen to go red for a couple of seconds by adding this:

if (secs == 1) {
document.body.style.backgroundColor="red";
}
if (secs == 59) {
document.body.style.backgroundColor="white";
}

to your tick function

there are lots of ways to trigger sounds via javascript but all of them have cross-broswer issues. There's a little run down here (http://www.javascripter.net/faq/sound/play.htm) and of course you can google for more... but once you decide on how you want to play the sound, you can just insert the function call into the code above

hope that helps.

Hey i would really like a repeating countdown timer as well for every Thursday at approximately 00:00 Greenwich Mean Time (GMT).

also if you can put it in html aswell but if that is to hard then don't worry thx so much in advance :thumbsup:

Hey i would really like a repeating countdown timer as well for every Thursday at approximately 00:00 Greenwich Mean Time (GMT).

also if you can put it in html aswell but if that is to hard then don't worry thx so much in advance :thumbsup:

Don't hijack someone else's finished thread! Prefer to start a new thread of your own.

This forum is not a free coding service. As a general rule, the people helping out in this forum don't write code for others (especially code that appears to be for homework), but try to help with fixing code that doesn't work. You may get someone to write this script for you, but you'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work.

Have you tried using the search feature of this forum?