25 Déc2015
Création d'un chronomètre
Objectif :
Appeler une fonction d'une manière répétitive en utilisant la fonction setInterval().
Travail à faire :
En se basant sur le code html suivant :
<!doctype html>
<html>
<head>
<title>Chronomètre</title>
<meta charset="utf-8">
<style type="text/css">
.chronometre{
margin: auto ;
width: 300px;
text-align: center;
}
.tim{
margin: auto;
width: 300px;
border: 1px solid rgba(0,0,0,0.5);
padding:5px 0;
text-align: center;
font-size: 1.5em;
font-family: digital;
margin-bottom: 10px;
}
button{
background: #3498db;
color: #fff;
width: 70px;
border-radius: 5px;
line-height: 1.5em;
border: none
}
</style>
</head>
<body>
<div class="chronometre">
<div class="tim">
<span >0 h</span> :
<span >0 min</span> :
<span >0 s</span> :
<span >0 ms</span>
</div>
<button id="start" onclick="start()">Start</button>
<button id="stop" onclick="stop()" >Stop</button>
<button id="reset" onclick="reset()" >Reset</button>
</div>
</body>
</html>
Créer un chronomètre composé d'un afficheur et 3 boutons : un bouton "start" pour lancer le chronomètre , un bouton "stop" pour l’arrêter et un bouton "reset" pour le remettre à zéro.
chronometre
Indications:
- Créer une fonction "start" qui appelle d'une manière répétitive la fonction update_chrono via la fonction setInterval avec une cadence de 100 ms.
- Créer une fonction "update_chrono()" qui permet d’incrémenter le nombre de millisecondes , secondes , minutes , et des heures.
- Créer une fonction "stop" qui arrête le traitement de setInterval.
- Créer une fonction "reset" qui remet les valeurs et l'affichage à 0 .
Le script chronomètre:
<script type="text/javascript">
/*la fonction getElementByTagName renvoie une liste des éléments portant le nom de balise donné ici "span".*/
var sp = document.getElementsByTagName("span");
var btn_start=document.getElementById("start");
var btn_stop=document.getElementById("stop");
var t;
var ms=0,s=0,mn=0,h=0;
/*La fonction "start" démarre un appel répétitive de la fonction update_chrono par une cadence de 100 milliseconde en utilisant setInterval et désactive le bouton "start" */
function start(){
t =setInterval(update_chrono,100);
btn_start.disabled=true;
}
/*La fonction update_chrono incrémente le nombre de millisecondes par 1 <==> 1*cadence = 100 */
function update_chrono(){
ms+=1;
/*si ms=10 <==> ms*cadence = 1000ms <==> 1s alors on incrémente le nombre de secondes*/
if(ms==10){
ms=1;
s+=1;
}
/*on teste si s=60 pour incrémenter le nombre de minute*/
if(s==60){
s=0;
mn+=1;
}
if(mn==60){
mn=0;
h+=1;
}
/*afficher les nouvelle valeurs*/
sp[0].innerHTML=h+" h";
sp[1].innerHTML=mn+" min";
sp[2].innerHTML=s+" s";
sp[3].innerHTML=ms+" ms";
}
/*on arrête le "timer" par clearInterval ,on réactive le bouton start */
function stop(){
clearInterval(t);
btn_start.disabled=false;
}
/*dans cette fonction on arrête le "timer" ,on réactive le bouton "start" et on initialise les variables à zéro */
function reset(){
clearInterval(t);
btn_start.disabled=false;
ms=0,s=0,mn=0,h=0;
/*on accède aux différents span par leurs indice*/
sp[0].innerHTML=h+" h";
sp[1].innerHTML=mn+" min";
sp[2].innerHTML=s+" s";
sp[3].innerHTML=ms+" ms";
}
</script>
