Scribd
Importer
9 vues3 pages

Chronomètre HTML avec boutons de contrôle

Le document décrit la création d'un chronomètre en HTML avec un afficheur et trois boutons : 'start', 'stop' et 'reset'. Il fournit des instructions pour implémenter des fonctions JavaScript qui gèrent le démarrage, l'arrêt et la réinitialisation du chronomètre, ainsi qu'une fonction pour mettre à jour l'affichage du temps. Le chronomètre doit s'incrémenter toutes les 100 ms en utilisant setInterval().

Transféré par

pssylla17
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
9 vues3 pages

Chronomètre HTML avec boutons de contrôle

Le document décrit la création d'un chronomètre en HTML avec un afficheur et trois boutons : 'start', 'stop' et 'reset'. Il fournit des instructions pour implémenter des fonctions JavaScript qui gèrent le démarrage, l'arrêt et la réinitialisation du chronomètre, ainsi qu'une fonction pour mettre à jour l'affichage du temps. Le chronomètre doit s'incrémenter toutes les 100 ms en utilisant setInterval().

Transféré par

pssylla17
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

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 :
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
➢ un bouton "reset" pour le remettre à zéro.

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

T. Badiane : sacourawali@[Link] 1
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>
Indications :
T. Badiane : sacourawali@[Link] 2
▪ 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 .

T. Badiane : sacourawali@[Link] 3

Vous aimerez peut-être aussi