Code HTML du chronomètre

4,185 huzaifa527

Ouvrir dans l'éditeur Publiez votre code

Code HTML du chronomètre

Recommandé

20 June 2025

Modèle de tableau de bord d'administration HTML

25 November 2025

Chargeur de jeu HTML5 avec le SDK Yandex Games

25 April 2025

Un code de Metehan

HTML

<html>
<head>
    <title>Digital Clock with Stopwatch</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>
<body style="background-color: black; color: white; text-align: center; padding-top: 20vh; font-size: 3rem;">
    <div id="clock">00:00:00</div>
    <div class="mt-3">
        <button id="startBtn" class="btn btn-primary">Start Stopwatch</button>
        <button id="stopBtn" class="btn btn-danger">Stop Stopwatch</button>
    </div>

<script>
        let timer;
        let hours = 0;
        let minutes = 0;
        let seconds = 0;
      
        function displayTime() {
            document.getElementById("clock").textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
      
        function startStopwatch() {
            timer = setInterval(() => {
                seconds++;
                if (seconds === 60) {
                    seconds = 0;
                    minutes++;
                }
                if (minutes === 60) {
                    minutes = 0;
                    hours++;
                }
                displayTime();
            }, 1000);
        }
      
        function stopStopwatch() {
            clearInterval(timer);
        }
      
        document.getElementById("startBtn").addEventListener("click", startStopwatch);
        document.getElementById("stopBtn").addEventListener("click", stopStopwatch);
    </script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
</body>
</html>

CSS

JS