Simulates a stop watch and displays the elapsed time

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>

  <HEAD>
    <TITLE>JsLib 1.3 - Exemple - chrono.js</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <META NAME="Author" CONTENT="Etienne CHEVILLARD">
    <!-- chrono.js -->
    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
/* chrono.js
 * Role : simule un chronometre et affiche le temps ecoule
 * Projet : JsLib
 * Auteur : Etienne CHEVILLARD (echevillard@users.sourceforge.net)
 * Version : 1.3
 * Creation : 25/04/2001
 * Mise a jour : 23/02/2005
 */

// --- Variables globales ---

// variables pour la gestion du chronometre
var chrono_demarre=false;
var chrono_ecoule=0;
var chrono_depart=0;
var chrono_dernier=0;

// variables pour la mise a jour dynamique
var chrono_champ;
var chrono_timeout;

// --- Fonctions ---

// indique si le chronometre est demarre ou non
function actifChrono() {
  return (chrono_demarre);
} // fin actifChrono()

// arrete le chronometre
function arreterChrono() {
  if (chrono_demarre) {
    chrono_dernier=(new Date()).getTime();
    chrono_ecoule+=(chrono_dernier-chrono_depart);
    chrono_demarre=false;
  }
  return true;
} // fin arreterChrono()

// active la mise a jour dynamique du temps mesure pour le champ specifie
function chargerChronoDyna(champ) {
  if (champ)
    chrono_champ=eval(champ);
  chrono_champ.value=tempsChrono();
  chrono_timeout=window.setTimeout("chargerChronoDyna()", 10);
  return true;
} // fin chargerChronoDyna(champ)

// desactive la mise a jour dynamique du temps mesure precedemment activee
function dechargerChronoDyna() {
  window.clearTimeout(chrono_timeout);
  return true;
} // fin dechargerChronoDyna()

// demarre le chronometre
function demarrerChrono() {
  if (!chrono_demarre) {
    chrono_depart=(new Date()).getTime();
    chrono_demarre=true;
  }
  return true;
} // fin demarrerChrono()

// remet a zero le chronometre si celui-ci est arrete
function RAZChrono() {
  if (!chrono_demarre) {
    chrono_ecoule=0;
    chrono_depart=0;
    chrono_dernier=0;
  }
  return true;
} // fin RAZChrono()

// retourne le temps mesure par le chronometre au format 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;
  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 (ch+":"+cm+":"+cs+":"+cc);
} // fin tempsChrono()
    
    </SCRIPT>
  </HEAD>

  <BODY onLoad="chargerChronoDyna('document.f.t')"
    onUnload="dechargerChronoDyna()">
 
    <H1>JsLib 1.3</H1>
    <HR>
    <H2>Exemple - chrono.js</H2>

    <NOSCRIPT>
      <P><I>Erreur : votre navigateur ne reconnait pas le Javascript ou est configur&eacute; pour ne
      pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la
      configuration dans les pr&eacute;f&eacute;rences/options de votre navigateur.</I>
      <HR>
    </NOSCRIPT>

    <P>Chronom&egrave;tre avec mise &agrave; jour dynamique :
      <FORM ACTION="GET" NAME="f">
        <INPUT NAME="t" TYPE=TEXT VALUE="0:00:00:00" SIZE=12>&nbsp;
        <INPUT TYPE=BUTTON VALUE="D&eacute;marrer / Arr&ecirc;ter"
        onClick="if (actifChrono()) arreterChrono(); else demarrerChrono();">&nbsp;
        <INPUT TYPE=BUTTON VALUE="Remettre &agrave; z&eacute;ro" onClick="RAZChrono();">
      </FORM>
  </BODY>
</HTML>
Related examples in the same category

1.	JavaScript Clock
2.	Fancy Clock
3.	JavaScript Clock (2)
4.	Live image clock
5.	Digital Clock
6.	Military Clock
7.	Standard Clock
8.	Animation: clock
9.	Calendar with Clock
Simulates a stop watch and displays the elapsed time : Clock « GUI Components « JavaScript DHTML

Related examples in the same category
