Zum Inhalt springen

Timer-Events: Zeit basierte Interaktionen

Schritt 2 von 7

Um die Konzepte zu verstehen, lass uns einen einfachen Countdown Timer bauen, der in 5 Sekunden die Meldung "Countdown: 0" anzeigen soll. Der Timer sollte alle 1000 Millisekunden (1 Sekunde) abgezählt werden, bis der Countdown fertig ist.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Countdown Timer</title>
</head>
<body>
<p id="countdown">5</p>
 
<script>
let countdown = 5;
 
function updateCountdown() {
if (countdown > 0) {
countdown--;
document.getElementById("countdown").innerText = countdown;
} else {
clearInterval(timer);
document.getElementById("countdown").innerText = "Countdown: 0";
}
}
const timer = setInterval(updateCountdown, 1000);
</script>
</body>
</html>