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.

Code:

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

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

Here is modified version with your requirement included...

Code:


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

Code:

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

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

Thread: Countdown Timer

Thread Tools

Search Thread

Countdown Timer

The Following User Says Thank You to coothead For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions