Countdown-Timer programmieren

Countdown-Timer

00:00

Countdown-Timer

In diesem Beispiel lernst du, wie du mit HTML und JavaScript einen Countdown-Timer erstellst, der von einer eingegebenen Zeit (Minuten und Sekunden) bis auf null herunterzählt.
Der Timer lässt sich starten, pausieren und zurücksetzen. Wenn er null erreicht, wechselt die Anzeige die Farbe und zeigt "Fertig!" an.

Ein Timer unterscheidet sich von einer Uhr in einem wichtigen Punkt: Eine Uhr zeigt immer die aktuelle Uhrzeit an und läuft einfach immer weiter. Ein Timer dagegen zählt von einem Wert, den man selbst festlegt (z. B. 5 Minuten), rückwärts bis 0 herunter — und ist dann fertig.

Dafür brauchen wir etwas mehr als bei einer einfachen Uhr:

  • Eingabefelder – damit man festlegen kann, wie lange der Timer laufen soll
  • Eine Anzeige – die die verbleibende Zeit im Format "mm:ss" zeigt
  • Buttons – um den Timer zu starten, zu pausieren und zurückzusetzen
  • JavaScript – das jede Sekunde die verbleibende Zeit verringert und die Anzeige aktualisiert

Zuerst bauen wir das HTML-Grundgerüst mit den Eingabefeldern, der Anzeige und den drei Buttons:

HTML 
<label for="timerMinutes">Minuten:</label>
<input type="number" id="timerMinutes" value="0" min="0">
<label for="timerSeconds">Sekunden:</label>
<input type="number" id="timerSeconds" value="10" min="0" max="59">

<p id="timerDisplay">00:00</p>

<button onclick="startTimer()">Start</button>
<button onclick="pauseTimer()">Pause</button>
<button onclick="resetTimer()">Reset</button>

Jeder Button ruft über "onclick" eine eigene JavaScript-Funktion auf, die wir gleich Schritt für Schritt programmieren.

Zuerst brauchen wir zwei globale Variablen: Wie viele Sekunden noch übrig sind, und eine Referenz auf den laufenden Timer (damit wir ihn später wieder stoppen können):

JavaScript 
let timerRemainingSeconds = 0;
let timerInterval = null;

Damit wir die verbleibenden Sekunden nicht als hässliche Zahl (z. B. "125"), sondern hübsch als "02:05" anzeigen können, schreiben wir uns eine kleine Hilfsfunktion "formatTime". Diese rechnet die Gesamtsekunden in Minuten und Sekunden um und sorgt mit "padStart(2, "0")" dafür, dass z. B. aus "5" eine "05" wird:

JavaScript 
function formatTime(totalSeconds) {
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;
    return String(minutes).padStart(2, "0") + ":" + String(seconds).padStart(2, "0");
}

Nun zur wichtigsten Funktion: "startTimer()". Beim ersten Klick auf "Start" lesen wir die eingegebenen Minuten und Sekunden aus und rechnen sie in die Gesamtsekunden um. Danach nutzen wir "setInterval", damit jede Sekunde die verbleibende Zeit um 1 verringert und neu angezeigt wird — solange, bis 0 erreicht ist.

Wichtig ist die Prüfung "if (timerInterval !== null) return;" am Anfang: Ohne sie würde bei mehrfachem Klick auf "Start" jedes Mal ein weiterer, zusätzlicher Zähl-Vorgang gestartet, wodurch die Zeit viel zu schnell herunterzählen würde.

JavaScript 
function startTimer() {
    if (timerInterval !== null) {
        return; // Timer läuft schon, nicht doppelt starten
    }

    if (timerRemainingSeconds === 0) {
        const minutes = Number(document.getElementById("timerMinutes").value);
        const seconds = Number(document.getElementById("timerSeconds").value);
        timerRemainingSeconds = minutes * 60 + seconds;
    }

    document.getElementById("timerDisplay").style.color = "";
    document.getElementById("timerDisplay").innerHTML = formatTime(timerRemainingSeconds);

    timerInterval = setInterval(function () {
        timerRemainingSeconds--;
        document.getElementById("timerDisplay").innerHTML = formatTime(timerRemainingSeconds);

        if (timerRemainingSeconds <= 0) {
            clearInterval(timerInterval);
            timerInterval = null;
            document.getElementById("timerDisplay").style.color = "red";
            document.getElementById("timerDisplay").innerHTML = "Fertig!";
        }
    }, 1000);
}

"Pause" ist einfach: Wir stoppen nur das Intervall mit "clearInterval", die verbleibenden Sekunden bleiben aber erhalten. Klickt man danach wieder auf "Start", geht es an genau der Stelle weiter, an der pausiert wurde (denn "timerRemainingSeconds" ist ja nicht mehr 0).

JavaScript 
function pauseTimer() {
    clearInterval(timerInterval);
    timerInterval = null;
}

"Reset" stoppt den Timer ebenfalls, setzt die verbleibenden Sekunden aber zusätzlich auf 0 zurück und leert die Anzeige, damit beim nächsten Klick auf "Start" wieder die aktuell eingegebenen Minuten/Sekunden verwendet werden:

JavaScript 
function resetTimer() {
    clearInterval(timerInterval);
    timerInterval = null;
    timerRemainingSeconds = 0;
    document.getElementById("timerDisplay").style.color = "";
    document.getElementById("timerDisplay").innerHTML = "00:00";
}

Am Ende sieht das komplette Beispiel dann genau so aus wie oben in der Live-Vorschau. Probiert es gleich hier selbst aus und verändert es nach Belieben:

Probiert doch mal folgendes aus:

  • Ändert die Textfarbe bei "Fertig!" von rot in eine andere Farbe.
  • Lasst die Anzeige bei "Fertig!" zusätzlich blinken (z. B. mit einer CSS-Animation).
  • Baut eine Prüfung ein, die verhindert, dass negative Zahlen eingegeben werden.
  • Zeigt zusätzlich Stunden an, falls der Timer länger als 60 Minuten laufen soll.
  • Überlegt euch, wie man bei 0 zusätzlich einen Ton abspielen könnte (Stichwort "Audio"-Element).

Falls ihr Fragen oder Ideen für weitere Timer-Varianten habt, schreibt mir gerne über das Kontaktformular.