Chronomètre fonctionnel

Leçon 9 sur 10 du cours Chronomètre - Projet HTML/CSS/JS de Coddy.

Maintenant que nous avons des boutons de démarrage et d'arrêt fonctionnels, il est temps de commencer à compter !

Pour compter, nous allons utiliser une fonction JavaScript appelée setInterval :

const interval = setInterval(func, milliseconds)

La fonction reçoit deux arguments : une fonction et un nombre représentant des millisecondes. La fonction est appelée à chaque intervalle de millisecondes fourni.

Par exemple :

let count = 0

function updateCount() {
	count += 1;
}

const interval = setInterval(updateCount, 1000)

Dans l'exemple ci-dessus, nous augmentons la variable count de 1 chaque seconde.

Si vous voulez arrêter un intervalle, utilisez clearInterval avec la valeur de retour de setInterval :

const interval = setInterval(updateCount, 1000)
clearInterval(interval)

Défi

Moyen

Ajoutez le support suivant à votre fichier JS :

Une fois que le bouton start/stop est cliqué, définissez un intervalle qui mettra à jour le texte du chronomètre d'une seconde à chaque seconde, assurez-vous qu'il est correctement formaté.
Une fois que le bouton start/stop est cliqué à nouveau, effacez l'intervalle en cours.

Une fois que vous aurez ajouté un setInterval à votre code, vous devrez cliquer sur le bouton reset de la vue web :

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>