Divers

Coder un chronomètre (timer)

Puisqu'en programmation dynamique il est souvent nécessaire de gérer le temps écoulé, nous vous présentons ici un exemple de chronomètre en JavaScript. Le code proposé utilise les méthodes window.setInterval() et window.clearTimeout() pour afficher les secondes en temps réel.

window.setInterval()	Appelle une fonction ou exécute une portion de code de manière répétitive à un intervalle donné.
window.clearTimeout()	Annule l'action établie par window.setInterval().

Essayez cet exemple (copiez-collez le code). Vous pourrez facilement le modifier pour qu'il compte à rebours.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple de "timer" en JavaScript</title>
</head>
<body>
<!-- affichage en gros caractères -->
<p id="affichage" style="margin: 100px; font-size: 4em;">0</p>

<script type="text/javascript">
  // secondes écoulées
  let secondes = 0;

  // élément où afficher le décompte
  let para = document.getElementById("affichage");

  // lance l'exécution de la fonction à toutes les secondes
  let chrono = window.setInterval(tictictic, 1000);

  // ---------------------------------------------------------
  // Incrément le nombre de secondes, affiche cette quantité
  // et arrête automatiquement après une minute.
  // ---------------------------------------------------------
  function tictictic() {
    secondes++;
    para.innerHTML = secondes;
    if (secondes == 60) {
      // arrête l'exécution lancée par setInterval()
      window.clearTimeout(chrono);
    }
  }
</script>

</body>
</html>