Apprenez à développer un chronomètre simple avec JavaScript. Cet article vous guide à travers la création d'un chronomètre interactif, idéal pour les développeurs débutants.

Développer un Chronomètre avec JavaScript

|

Écrit par

Hugo – La Pause Code

Introduction

Dans le monde du développement front-end, JavaScript est un outil puissant qui permet de créer des applications interactives et dynamiques. Dans cet article, nous allons explorer comment développer un chronomètre simple en utilisant JavaScript. Ce projet est idéal pour les développeurs débutants souhaitant améliorer leurs compétences en programmation.

Création de la structure HTML

Pour commencer, nous allons créer la structure de base de notre chronomètre en HTML. Voici un exemple simple :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chronomètre</title>
</head>
<body>
    <div id="chronometre">
        <span id="temps">00:00:00</span>
        <button id="demarrer">Démarrer</button>
        <button id="arreter">Arrêter</button>
        <button id="reset">Réinitialiser</button>
    </div>
</body>
</html>

Ajout du JavaScript

Une fois notre structure HTML en place, nous allons ajouter le JavaScript pour faire fonctionner notre chronomètre. Voici un code simple qui gère le démarrage, l’arrêt et la réinitialisation du chronomètre :

let secondes = 0;
let minutes = 0;
let heures = 0;
let interval;

const tempsAffiche = document.getElementById('temps');
const demarrerBtn = document.getElementById('demarrer');
const arreterBtn = document.getElementById('arreter');
const resetBtn = document.getElementById('reset');

function demarrerChronometre() {
    interval = setInterval(() => {
        secondes++;
        if (secondes === 60) {
            secondes = 0;
            minutes++;
        }
        if (minutes === 60) {
            minutes = 0;
            heures++;
        }
        tempsAffiche.innerHTML = `${String(heures).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secondes).padStart(2, '0')}`;
    }, 1000);
}

demarrerBtn.addEventListener('click', demarrerChronometre);

arreterBtn.addEventListener('click', () => {
    clearInterval(interval);
});

resetBtn.addEventListener('click', () => {
    clearInterval(interval);
    secondes = 0;
    minutes = 0;
    heures = 0;
    tempsAffiche.innerHTML = '00:00:00';
});

Conclusion

Nous avons créé un chronomètre simple en utilisant HTML et JavaScript. Ce projet est une excellente manière de pratiquer vos compétences en développement front-end. N’hésitez pas à personnaliser le chronomètre en ajoutant des fonctionnalités supplémentaires, comme un bouton de pause ou des options de style CSS pour améliorer l’apparence. Amusez-vous à coder !

Laisser un commentaire