Home
JavaScript
tutoriels

Créer un chronomètre avec javascript

Salut à tous. Bienvenue dans le tutoriel d’aujourd’hui. Dans le tutoriel d’aujourd’hui, nous allons apprendre à créer un 'Chronomètre'. Pour construire ce projet, nous avons besoin de HTML, CSS et Javascript. Découvrons comment construire ce projet en quelques étapes simples et faciles à suivre.

Il s’agit d’un projet javascript de niveau intermédiaire. Je suggérerais aux débutants d’essayer d’autres projets avant d’essayer celui-ci. Si vous voulez apprendre javascript à travers plus de projets de ce type alors je vous recommande de faire une recherche à travers notre blog

Structure des dossiers du projet :

Avant de commencer à coder, nous examinons la structure des dossiers du projet. Nous créons un dossier de projet appelé - 'Alarme'. Le dossier se compose de trois fichiers. Ces fichiers sont index.html, style.css et script.js.

Code HTML

Nous commençons par le code HTML. Tout d’abord, copiez le code ci-dessous et collez-le dans votre fichier HTML.

Double taper sur le code pour copier son contenu


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Stopwatch Javascript</title>
    <!-- Google Font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Mono:wght@700&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="timer-display">00:00:00:000</div>
      <div class="buttons">
        <button id="pause-timer">Pause</button>
        <button id="start-timer">Start</button>
        <button id="reset-timer">Reset</button>
      </div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

Code CSS

Ensuite, nous stylisons notre application en utilisant CSS. Pour cette copie, le code qui vous a été fourni ci-dessous et collez-le dans une feuille de style.

Double taper sur le code pour copier son contenu


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #dbe9ff;
}
.container {
  background-color: #f0f9ff;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: min(90%, 31.25em);
  padding: 3.75em 0;
  border-radius: 0.8em;
  box-shadow: 0 1.97em 3.75em rgba(1, 87, 185, 0.2);
}
.timer-display {
  position: relative;
  width: 110%;
  background-color: #3c98ff;
  left: -5%;
  padding: 1em 0;
  font-family: "Roboto Mono", monospace;
  color: #f0f9ff;
  font-size: 2.5em;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 0.3em;
  box-shadow: 0 0.5em 1em rgba(1, 87, 185, 0.2);
}
.buttons {
  width: 80%;
  margin: 3.8em auto 0 auto;
  display: flex;
  justify-content: space-around;
}
.buttons button {
  font-size: 1.12em;
  background-color: #dbe9ff;
  color: #3c98ff;
  border: none;
  font-family: "Poppins", sans-serif;
  border-radius: 0.5em;
  padding: 1em 1.5em;
  cursor: pointer;
  outline: none;
}
#start-timer {
  background-color: #3c98ff;
  color: #f0f9ff;
}

Code JavaScript

Enfin, nous ajoutons des fonctionnalités en utilisant Javascript. Encore une fois, copiez le code ci-dessous et collez-le dans votre fichier de script.
Nous commençons par créer des variables initiales et créer des références. Dans un chronomètre, l’utilisateur peut démarrer, mettre en pause ou réinitialiser la minuterie.
Lorsqu’un utilisateur clique sur le bouton de démarrage, nous effacons tous les intervalles précédents et commençons à appeler la fonction 'displayTimer' à un intervalle de 10 ms. La fonction 'displayTimer' est chargée d’effectuer les calculs pendant les millisecondes, les secondes, les minutes et les heures, puis d’afficher la minuterie sur l’interface utilisateur.
Lorsque l’utilisateur clique sur la minuterie de pause, nous effacons simplement l’intervalle. Pour la minuterie de réinitialisation, nous effacons l’intervalle et définissons les millisecondes, secondes, minutes et heures sur 0 et enfin, nous affichons la minuterie dans notre interface utilisateur.

Double taper sur le code pour copier son contenu


let [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];
let timerRef = document.querySelector(".timer-display");
let int = null;

document.getElementById("start-timer").addEventListener("click", () => {
  if (int !== null) {
    clearInterval(int);
  }
  int = setInterval(displayTimer, 10);
});

function displayTimer() {
  milliseconds += 10;
  seconds = milliseconds == 1000 ? (seconds + 1) % 60 : seconds;
  minutes = seconds == 0 && milliseconds == 0 ? (minutes + 1) % 60 : minutes;
  hours = minutes == 0 && seconds == 0 && milliseconds == 0 ? hours + 1 : hours;
  milliseconds = milliseconds == 1000 ? 0 : milliseconds;

  let h = String(hours).padStart(2, "0");
  let m = String(minutes).padStart(2, "0");
  let s = String(seconds).padStart(2, "0");
  let ms = String(milliseconds).padStart(3, "0");

  timerRef.innerHTML = `${h} : ${m} : ${s} : ${ms}`;
}

document.getElementById("pause-timer").addEventListener("click", () => {
  clearInterval(int);
});

document.getElementById("reset-timer").addEventListener("click", () => {
  clearInterval(int);
  [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];
  timerRef.innerHTML = "00 : 00 : 00 : 000";
});

Commentaires

  • A+
  • A-