PDA

View Full Version : Countdown Timer



chriscc17
03-28-2011, 02:45 PM
I found this countdown timer on the internet.

It starts from 30 seconds and counts down to 0

What I would like for it to do is once it hits 0 to automatically
reset to 30 and stop without using page refresh or a button to reset.

Any help would be appreciated.



<form name="counter"><input type="text" size="8"
name="d2"></form>

<script>
<!--
//
var milisec=0
var seconds=30
document.counter.d2.value='30'

function display(){
if (milisec<=0){
milisec=9
seconds-=1
}
if (seconds<=-1){
milisec=0
seconds+=1
}
else
milisec-=1
document.counter.d2.value=seconds+"."+milisec
setTimeout("display()",100)
}
display()
-->
</script>

coothead
03-29-2011, 08:56 PM
Hi there chriscc17,

that is a very old script and has a few errors. :eek:

The worst being that it carried on running after reaching zero. :eek:

Here is modified version with your requirement included...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>simple countdown</title>

<style type="text/css">
form {
text-align:center;
}
input {
font-family:monospace;
font-size:18px;
font-weight:bold;
text-align:center;
background-color:#f0f0f0;
}
</style>

<script type="text/javascript">

/*** these values are editable ***/

var milisec=0;
var seconds=30;

/********************************/

var zero=null;
var temp=seconds+':'+milisec+'0';

function display(){
if(seconds<10){
zero='0';
}
document.forms[0][0].value=zero+seconds+':'+milisec+'0';
if(milisec<=0){
milisec=10;
seconds--;
}
if(seconds<0){
setTimeout(function(){document.forms[0][0].value=temp},1000);
return;
}
milisec--
setTimeout(function(){display()},100)
}
window.addEventListener?
window.addEventListener('load',display,false):
window.attachEvent('onload',display);
</script>

</head>
<body>

<form action="#">
<div>
<input type="text" size="8">
</div>
</form>

</body>
</html>

coothead

chriscc17
03-30-2011, 01:11 AM
Thanks a lot. That's exactly what I was looking for.

coothead
03-30-2011, 09:29 AM
No problem, you're very welcome. ;)

jpalmes
06-08-2012, 03:17 PM
Hi there, I know this is an old thread but I do need this particular code to work for my needs and any help is greatly appreciated. Is there a way to add a minute part to it? I need this exact script but need it to count down from 7minutes 30seconds. Thank you for your help.

coothead
06-08-2012, 08:54 PM
Hi there jpalmes,

here is a possible example...

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>simple countdown</title>

<style>
form {
text-align:center;
}
input {
font-family:'courier new',monospace;
font-size:18px;
font-weight:bold;
text-align:center;
background-color:#f0f0f0;
box-shadow: 5px 5px 5px #999;
}
</style>

<script>

/*** these values are editable ***/

var sec=30;
var min=7;

/********************************/

var m=0;
var z='';
var z1='';

if(sec<=10){
zero='0';
}
if(min<10){
zero1='0';
}
var t=z1+min+':'+z+sec+':'+m+'0';
m++;

function display(){

if(m<=0){
m=10;
sec--;
}
if(sec<10){
z='0';
}
if(sec<0){
sec=59;
z='';
min--;
}
if(min<10){
z1='0';
}
m--
document.forms[0][0].value=z1+min+':'+z+sec+':'+m+'0';

if((min<=0)&&(sec==0)&&(m==0)){
setTimeout(function(){document.forms[0][0].value=t},1000);
return;
}
setTimeout(function(){display()},100);
}
window.addEventListener?
window.addEventListener('load',display,false):
window.attachEvent('onload',display);
</script>

</head>
<body>

<form action="#">
<div>
<input type="text" size="12">
</div>
</form>

</body>
</html>

coothead

jpalmes
06-09-2012, 03:33 AM
that worked! thank you so much! If its not too much to ask, can you help me with one little thing? How can it be modified to stay at 00:00:00 once the timer ends and not have it reset to the set time? thank you sooo much!

coothead
06-09-2012, 06:53 AM
Hi there jpalmes,

just remove this line from the code...

setTimeout(function(){document.forms[0][0].value=t},1000);

coothead

jpalmes
06-09-2012, 08:39 AM
oh gosh. you're a life saver ;)

Thank you soooo much

coothead
06-09-2012, 08:49 AM
No problem, you're very welcome . ;)
coothead

rkcompsys
10-13-2015, 02:39 AM
I've been trying for the past couple of weeks to figure out how to modify this code. I would like to have a countdown from 8 hours to zero. Once at zero, it pulls a random text string from a file and posts it by the timer. If the page is refreshed, it starts the timer over and the text string goes away until the countdown timer hits zero again. But I have no idea what sort of file I need for the text strings to reside or how to format it so that it would only pull one. Even tried CSV with little success. Any information on this mod concept is generous and appreciated. Maybe I can figure out the rest of it on my own, in a few months.

Beverleyh
10-13-2015, 05:39 AM
I've been trying for the past couple of weeks to figure out how to modify this code.
Looks like you've forgotten your code. If you post what you have already maybe someone can offer suggestions.


But I have no idea what sort of file I need for the text strings to reside or how to format it so that it would only pull one. How about an array of text lines in an array within the actual JavaScript that could be moved to an external JS file?