Simulates a stop watch and displays the elapsed time : Clock « GUI Components




<!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>
Simulates a stop watch and displays the elapsed time : Clock « GUI Components « JavaScript DHTML
