Sekundencountdown
Zählt eine frei eingegebene Sekundenzahl herunter — Start und Stop liegen auf demselben Knopf.
Dieser Sekundencountdown, eingeschickt von Scano One, ist die einfachste Form einer Eieruhr: Ihr tragt in das Feld eine Sekundenzahl ein, klickt auf „Start", und die Zahl zählt im Sekundentakt rückwärts bis null. Der Knopf beschriftet sich dabei selbst um — aus „Start" wird „Stop", ein weiterer Klick hält den Countdown an. Nach Ablauf springt die Beschriftung von allein wieder auf „Start" zurück.
In der Demo stehen 60 Sekunden im Feld, ihr könnt den Wert aber frei überschreiben — für den Tee drei Minuten (180), für eine Pause im Unterricht fünf (300). Weil während des Laufs dasselbe Feld auch die Restzeit anzeigt, seht ihr immer genau, wo der Countdown gerade steht. Stoppt ihr zwischendurch, bleibt die Restzeit stehen; ein erneuter Klick auf „Start" beginnt allerdings wieder bei dem Wert, der dann im Feld steht — der Countdown läuft also von der angehaltenen Zahl aus weiter.
Anders als bei unserem Countdown auf ein festes Datum geht es hier um eine Dauer, nicht um einen Termin. Das macht das Script überall dort nützlich, wo eine Zeitspanne abläuft: bei Quizfragen, Spielrunden, Vorträgen oder einem zeitlich begrenzten Angebot auf der Seite.
Eine Warnung noch, die für alle Zeitmessungen im Browser gilt: Der Countdown zählt Sekundentakte, keine echte Uhrzeit. Läuft der Rechner unter Volllast oder schickt der Browser einen Hintergrund-Tab in den Ruhezustand, können die Takte länger als eine Sekunde dauern. Für eine Küchenuhr reicht das allemal, für eine amtliche Zeitmessung nicht.
Wer lieber auf einen festen Feiertag zählen mag, findet bei uns auch einen Countdown bis Weihnachten und einen Silvester-Countdown. Und wenn ihr statt rückwärts lieber vorwärts zählen wollt, zeigt die Onlinezeit, wie lange eine Seite schon geöffnet ist.
Während der Countdown läuft, zeigt das Feld die verbleibenden Sekunden an.
So funktioniert das Script
Das Script besteht aus drei kleinen Funktionen: count() reagiert auf den Knopf und entscheidet, ob gestartet oder gestoppt wird, minus() zieht im Sekundentakt eine Sekunde ab, und stoppen() räumt am Ende auf. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts auf der Seite kollidieren.
let zaehler = null;
let countzahl = 0;Zwei Merker begleiten das ganze Script. In countzahl steht die verbleibende Sekundenzahl. zaehler nimmt später die Nummer auf, die setInterval zurückgibt — solange dort null steht, läuft kein Countdown. Diese eine Variable ersetzt das gestartet=true/false des Originals: Sie sagt zugleich, ob etwas läuft und was gestoppt werden müsste. Weil sich beide Werte im Betrieb ändern, stehen sie hinter let und nicht hinter const.
countzahl = parseInt(feld.value, 10);
if (isNaN(countzahl) || countzahl < 1) {
meldung.textContent = "Bitte tragt eine Sekundenzahl ab 1 ein.";
return;
}Beim Start wird das Eingabefeld ausgelesen. parseInt macht aus dem eingetippten Text eine ganze Zahl; die 10 dahinter legt fest, dass im Zehnersystem gelesen wird. Steht dort keine brauchbare Zahl, meldet isNaN („is Not a Number") das, es erscheint ein Hinweis, und return beendet die Funktion, bevor überhaupt etwas losläuft.
knopf.textContent = "Stop";
zaehler = setInterval(minus, 1000);Jetzt beginnt der Countdown: Der Knopf beschriftet sich um, und setInterval ruft minus alle 1000 Millisekunden auf, also jede Sekunde. Der Rückgabewert landet in zaehler — nur mit dieser Nummer lässt sich die Wiederholung später wieder abstellen.
function minus() {
if (countzahl > 0) {
countzahl--;
feld.value = countzahl;
} else {
stoppen("Die Zeit ist um.");
}
}Das ist der Sekundentakt. countzahl-- ist die Kurzform für „ziehe eins ab", und die neue Zahl wandert sofort ins Eingabefeld — deshalb sieht man dort die Restzeit schrumpfen. Ist die Null erreicht, greift der else-Zweig und beendet den Lauf.
function stoppen(text) {
clearInterval(zaehler);
zaehler = null;
knopf.textContent = "Start";
meldung.textContent = text;
}Zum Aufräumen gehören drei Handgriffe, egal ob der Countdown abgelaufen ist oder von Hand angehalten wurde: clearInterval beendet die Wiederholung, zaehler = null vermerkt „es läuft nichts mehr", und der Knopf heißt wieder „Start". Weil die Funktion den Meldungstext als Wert entgegennimmt, kann derselbe Code einmal „Die Zeit ist um." und einmal „Angehalten." ausgeben.
if (zaehler === null) {
// starten
} else {
stoppen("Angehalten.");
}Das ist der Umschalter hinter dem einen Knopf: Läuft nichts, wird gestartet — läuft etwas, wird gestoppt. Die drei Gleichheitszeichen prüfen streng auf Wert und Typ und sind in JavaScript dem einfachen == immer vorzuziehen.
knopf.addEventListener("click", count);Zum Schluss wird count() mit dem Knopf verbunden. Das Script steht dafür unter dem Markup, damit Feld und Knopf schon existieren, wenn es läuft. Das Original erzeugte sein Formular noch selbst per document.write und hängte den Aufruf über ein onclick-Attribut an — heute trennt man Markup und Verhalten sauber.
Zum Anpassen: Die Vorbelegung ändert ihr im HTML über value="60". Wollt ihr statt Sekunden Minuten herunterzählen, ersetzt ihr die 1000 in setInterval durch 60000. Und wenn der Countdown am Ende etwas Auffälligeres tun soll, ergänzt ihr im else-Zweig von minus() einfach eine Zeile, etwa alert("Fertig!").
Script für die eigene Homepage
Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.