Compte à rebours en JavaScript

Définit la balise HTML du minuteur

Dans le code ci-dessus, la balise <h1> contient l’affichage de la minuterie. Utilisez ce code dans le code HTML de votre page Web. Le id="count-down-timer" est requis car on accède à l’élément en JavaScript avec l’id count-down-timer pour changer le texte de l’élément dynamiquement au moment de l’exécution.

<h1 class="text-center" id="count-down-timer"></h1>

Régler la valeur de la minuterie

Une fois la balise en place, l’étape suivante consiste à définir la valeur du temps de comptage. Habituellement, les pages Web utilisent une heure codée en dur intégrée à leur code, qui n’est pas personnalisable. Vous pouvez régler le timer dans la méthode window.onload en time_minutes et time_seconds. Par exemple, si vous souhaitez régler une minuterie sur une minute et demie, définissez le code comme suit:

let time_minutes = 1;   // Value in minutes
let time_seconds = 30;  // Value in seconds

Si vous souhaitez régler sur 3 minutes, réglez alors time_minutes = 3 et laissez le time_seconds = 0. Maintenant, une fois que vous exécutez votre code ou rechargez votre HTML, vous pouvez obtenir la sortie mise à jour.

L’exécution démarre avec la fonction window.onload. Il prend la valeur de la minuterie que vous avez définie et calcule la durée totale en secondes.

let time_minutes = 1;   // Value in minutes
let time_seconds = 30;  // Value in seconds

let duration = time_minutes * 60 + time_seconds;

document.querySelector('#count-down-timer') récupère le nœud HTML de l’élément. Ce nœud sera utilisé pour actualiser la valeur du minuteur.

element = document.querySelector('#count-down-timer');

Une fois l’élément disponible, il s’initialise avec la valeur que nous avons définie. Par exemple, dans le code, il est de 1 minute et 30 secondes. Il est défini dans un format rembourré.

function paddedFormat(num) {
  return num < 10 ? '0' + num : num;
}

console.log(paddedFormat(3));
console.log(paddedFormat(12));

Production:

03
12

La fonction paddedFormat(num) renvoie le nombre complété. Pour les minutes et les secondes, les valeurs à un chiffre sont complétées en leur préfixant 0. Par exemple, 2 minutes et 5 secondes sont remplies comme 02 et 05, respectivement.

element.textContent =
    `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;

Ensuite, nous invoquons la fonction startCountDown(--duration, element) en passant duration en secondes, et le nœud HTML de l’élément d’affichage. Nous avons affiché la valeur 01:30 maintenant. Par conséquent, nous avons besoin que la minuterie démarre à 01:29. C’est la raison pour laquelle nous utilisons l’opérateur unaire de décrémentation de durée --duration.

startCountDown(--duration, element);

startCountDown(duration, element) est le cœur de la minuterie. En cela, nous utilisons la fonction setInterval(function(){}, 1000) de JavaScript pour exécuter le timer après chaque seconde (1000 millisecondes) jusqu’à ce qu’il soit effacé ou tué en utilisant clearInterval(countInterval).

function startCountDown(duration, element) {
  let secondsRemaining = duration;
  let min = 0;
  let sec = 0;

  let countInterval = setInterval(function() {
    min = parseInt(secondsRemaining / 60);
    sec = parseInt(secondsRemaining % 60);

    element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;

    secondsRemaining = secondsRemaining - 1;
    if (secondsRemaining < 0) {
      clearInterval(countInterval)
    };
  }, 1000);
}

Dans la fonction setinterval(), les minutes et secondes d’affichage sont calculées. Les minutes sont calculées en divisant la valeur remainingSeconds par 60 pour donner la valeur des minutes et en prenant sa partie entière.

let secondsRemaining = 89;
let min = parseInt(secondsRemaining / 60);
let sec = parseInt(secondsRemaining % 60);

console.log(secondsRemaining + 'seconds');
console.log(min);
console.log(sec);

Production:

89  // Equivalent to 1 min and 29 seconds
1
29

Ensuite, nous affichons les minutes et secondes calculées sur la page web en paramétrant le texte à l’aide de l’attribut textContent de l’élément nœud HTML.

element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;

Ensuite, la valeur diminue pour les secondsRemaining, et la fonction timer s’exécute chaque seconde avec la méthode setInterval().

Enfin, une fois que la valeur secondsRemaining est à 0, le clearInterval(countInterval) est déclenché pour arrêter le chronomètre. Cela garantit également que la minuterie n’est pas redémarrée ou passe à des valeurs négatives.