Chronomètre JavaScript

Harshit Jindal 12 octobre 2023

JavaScript

Chronomètre JavaScript

Un chronomètre est utilisé pour mesurer le temps qui s’écoule entre son activation et sa désactivation. Il permet de mesurer le temps pris pour une activité spécifique. Nous construirons notre chronomètre en utilisant les méthodes de synchronisation JavaScript setTimeout() et clearTimeout() qui aident dans les implémentations liées aux intervalles de temps. Le chronomètre a un affichage et trois boutons. L’écran affiche l’heure et les trois boutons pour démarrer, arrêter et réinitialiser le chronomètre. Ce tutoriel explique comment construire un chronomètre en JavaScript.

Chronomètre JavaScript

Code HTML

<h1><time>00:00:00</time></h1>
<button id="strt">start</button>
<button id="stp">stop</button>
<button id="rst">reset</button>

Dans le code ci-dessus, nous utilisons HTML pour afficher l’heure du chronomètre et créer les trois boutons requis start, stop et reset.

Code JavaScript

var h1 = document.getElementsByTagName('h1')[0];
var start = document.getElementById('strt');
var stop = document.getElementById('stp');
var reset = document.getElementById('rst');
var sec = 0;
var min = 0;
var hrs = 0;
var t;

function tick() {
  sec++;
  if (sec >= 60) {
    sec = 0;
    min++;
    if (min >= 60) {
      min = 0;
      hrs++;
    }
  }
}
function add() {
  tick();
  h1.textContent = (hrs > 9 ? hrs : '0' + hrs) + ':' +
      (min > 9 ? min : '0' + min) + ':' + (sec > 9 ? sec : '0' + sec);
  timer();
}
function timer() {
  t = setTimeout(add, 1000);
}

timer();
start.onclick = timer;
stop.onclick = function() {
  clearTimeout(t);
} reset.onclick = function() {
  h1.textContent = '00:00:00';
  seconds = 0;
  minutes = 0;
  hours = 0;
}

chronomètre javascript

On sélectionne d’abord tous les éléments HTML à l’aide de sélecteurs afin de pouvoir les manipuler à l’aide de JavaScript et initialiser 3 variables hrs, min et sec pour mémoriser l’heure courante. Nous déclarons également une variable t pour stocker setTimeout() et l’effacer en appelant clearTimeout().
Nous avons attaché la fonction minuterie au bouton start. Chaque fois que nous cliquons sur le bouton start, la fonction timer() est appelée, qui à son tour appelle la fonction d’ajout à un intervalle de 1 seconde. La fonction add() appelle la fonction tick() pour incrémenter les secondes de 1 et ajuster les minutes et les heures en conséquence. Il réinitialise le contenu de l’affichage pour afficher la nouvelle heure puis se rappelle en appelant à nouveau la fonction timer().
Nous avons attaché le clearTimeout() au bouton stop pour arrêter d’appeler périodiquement la fonction add.
Nous avons attaché une fonction de remise à l’heure à 00:00:00 et de remise à zéro du bouton sec, min et hrs à 0 pour reset.

Auteur: Harshit Jindal

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn