Funktionierende Stoppuhr

Lektion 9 von 10 im Kurs Stoppuhr - HTML/CSS/JS Projekt von Coddy.

Jetzt, da wir funktionierende Start- und Stopp-Buttons haben, ist es an der Zeit, mit dem Zählen zu beginnen!

Zum Zählen verwenden wir eine JavaScript-Funktion namens setInterval:

const interval = setInterval(func, milliseconds)

Die Funktion erhält zwei Argumente: eine Funktion und eine Zahl, die Millisekunden darstellt. Die Funktion wird alle angegebenen Millisekunden aufgerufen.

Ein Beispiel:

let count = 0

function updateCount() {
	count += 1;
}

const interval = setInterval(updateCount, 1000)

Im obigen Beispiel erhöhen wir die Variable count jede Sekunde um 1.

Wenn Sie ein Intervall stoppen möchten, verwenden Sie clearInterval mit dem Rückgabewert von setInterval:

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

Aufgabe

Mittel

Füge die folgende Unterstützung zu deiner JS-Datei hinzu:

Sobald die start/stop-Schaltfläche angeklickt wird, richte ein Intervall ein, das den stopwatch-Text jede Sekunde um eins aktualisiert. Stelle sicher, dass er korrekt formatiert ist.
Sobald die start/stop-Schaltfläche erneut angeklickt wird, lösche das laufende Intervall.

Sobald du ein setInterval zu deinem Code hinzufügst, musst du die reset-Schaltfläche in der Webansicht anklicken:

Probier es selbst

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