Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

javascript countdown timer

timer countdown countdown timer

  • Please log in to reply
2 replies to this topic

#1 theonebeyond

theonebeyond

    CC Lurker

  • Just Joined
  • Pip
  • 2 posts

Posted 04 February 2011 - 01:06 PM

Hi all,

I am missing something here. . . I am trying to make a 10 minute countdown timer. I found some code and modified it so it counts down from 10 minutes like I wanted, but now I have two problems.
1. I want it to stop at 0, and
2. I want a popup box when it gets there.

I have tried all sorts of combinations, and I cannot seem to figure out how to do this. can anyone point me in the right direction?


<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
/* chrono.js
 * Role : Simulate a stopwatch with display controls
 * Projet : JsLib
 * Author : Etienne CHEVILLARD (echevillard@users.sourceforge.net)
 * Version : 1.3
 * Creation : 25/04/2001
 * Mise a jour : 23/02/2005
 */

// --- Global Variables ---

// variables defineing the lenth of time
var chrono_demarre=false; //does the timer start on page load
var chrono_ecoule=600000; //the starting time for the timer
var chrono_depart=0; //these two variables control the flow of the timer - this is the starting time
var chrono_dernier=0; // and this is the ending time. These are subtracted to count down or up.

// set the variables for dynamic display
var chrono_champ;
var chrono_timeout;

//  ---Functions---

// is the stopwatch running? aka has the stop button been pushed
function actifChrono() {
  return (chrono_demarre);
} // finish actifChrono()

// stop the stopwatch
function arreterChrono() {
  if (chrono_demarre) {
    chrono_dernier=(new Date()).getTime();
    chrono_ecoule-=(chrono_dernier-chrono_depart);
    chrono_demarre=false;
  }
  return true;
} // finish arreterChrono()

// activate dynamic display of the time mesurment
function chargerChronoDyna(champ) {
  if (champ)
    chrono_champ=eval(champ);
  chrono_champ.value=tempsChrono();
      
  chrono_timeout=window.setTimeout("chargerChronoDyna()", 10);
  return true;
} // fin chargerChronoDyna(champ)

// display of time measurment previously activated
function dechargerChronoDyna() {
  window.clearTimeout(chrono_timeout);
  return true;
} // fin dechargerChronoDyna()

// start the stopwatch
function demarrerChrono() {
  if (!chrono_demarre) {
    chrono_depart=(new Date()).getTime();
    chrono_demarre=true;
  }

  return true;
} // fin demarrerChrono()

// reset the stopwatch to default time
function RAZChrono() {
  if (!chrono_demarre) {
    chrono_ecoule=600000;
    chrono_depart=0;
    chrono_dernier=0;
  }
  return true;
} // finish RAZChrono()

// format the display time (if needed HH:)MM:SS:CC
function tempsChrono() {
  var cnow;
  if (chrono_demarre) {
    chrono_dernier=(new Date()).getTime();
    cnow=new Date(chrono_ecoule-(chrono_dernier-chrono_depart));
  } else {
    cnow=new Date(chrono_ecoule);
  }
  var ch=parseInt(cnow.getHours()) - 1; //if needed
  var cm=cnow.getMinutes();
  var cs=cnow.getSeconds();
  var cc=parseInt(cnow.getMilliseconds()/10);
  if (cc<10) cc="0"+cc;
  if (cs<10) cs="0"+cs;
  if (cm<10) cm="0"+cm;
  return (cm+":"+cs+":"+cc);

} // finish tempsChrono()
    
<BODY onLoad="chargerChronoDyna('document.f.t')"
    onUnload="dechargerChronoDyna()">
 

  
      <FORM ACTION="GET" NAME="f">
        <INPUT NAME="t" TYPE=TEXT VALUE="0:00:00:00" SIZE=12> 
        <INPUT TYPE=BUTTON VALUE="start/stop"
        onClick="if (actifChrono()) arreterChrono(); else demarrerChrono();"> 
        <INPUT TYPE=BUTTON VALUE="Reseto" onClick="RAZChrono();">
      </FORM>
</SCRIPT>

  • 0

#2 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 06 February 2011 - 03:03 AM

That's a lot of code :blink:
I'd just do it like this:

<html>
<head>
<script type="text/javascript">
var mins = 10;
var secs = 0;
var timer;

function start(){
timer = setInterval('update()', 1000);
}

function update(){
var timeField = document.getElementById('time');
if(secs == 0){
if(mins == 0){
timeField.innerHTML = 'Time's up!';
clearInterval(timer);
alert('Time's up');
return;
}
mins--;
secs = 59;
} else {
secs--;
}
if(secs<10){
timeField.innerHTML = 'Time left: ' + mins + ':0' + secs;
} else {
timeField.innerHTML = 'Time left: ' + mins + ':' + secs;
}
}
</script>
</head>
<body onload="start();">
<div id="time" >
</div>
</body>
</html>

  • 1

#3 theonebeyond

theonebeyond

    CC Lurker

  • Just Joined
  • Pip
  • 2 posts

Posted 07 February 2011 - 07:08 AM

Thanks for your reply! Your answer is certainly easier to grasp then what I am working with.


I am working on learning Javascript, so I don't understand everything, but part of why I think the code I am using is longer, is that it has start/stop functions, like a stop watch, as well as reset. I understand that the part I need here is
                            if(secs == 0){
				if(mins == 0){
					timeField.innerHTML = 'Time's up!';
					clearInterval(timer);
                                        alert('Time's up');
					return;
or something similar, but I can't figure out where to put this so that it works with the rest. I tried it several different ways, and either it is ignored, or breaks the stopwatch. Thank you for your help.
  • 0





Also tagged with one or more of these keywords: timer, countdown, countdown timer

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download