Countdown-Timer
Countdown erstellen, benutzerdefinierte Zeit und Erinnerung unterstützt
Zeit einstellen
Was ist ein Countdown-Timer?
Ein Countdown-Timer zählt von einer festgelegten Dauer bis null herunter. Er ist nützlich für konzentriertes Arbeiten, Kochen, Sportintervalle, Unterricht, Meetings, Vorträge und alle Aufgaben, bei denen ein klarer Zeitrahmen wichtiger ist als die aktuelle Uhrzeit. Im Unterschied zur Stoppuhr, die die vergangene Zeit ab null misst, zeigt ein Countdown vor allem die verbleibende Zeit und den Endpunkt. Das hilft beim Tempo, beim rechtzeitigen Abschluss und beim Vermeiden von Überziehungen. Diese Seite enthält zusätzlich Stoppuhr- und Mehrfach-Timer-Funktionen, sodass auch Rundenzeiten und mehrere kleine Aufgaben verwaltet werden können. Da alles im geöffneten Browser-Tab läuft, sollte die Seite bei wichtigen Erinnerungen aktiv bleiben.
So verwenden Sie das Tool
So verwenden Sie es
- Wählen Sie einen Tab: Countdown, Stoppuhr oder Multi-Timer-Modus
- Für Countdown: Geben Sie Stunden/Minuten/Sekunden ein oder klicken Sie auf voreingestellte Zeiten
- Klicken Sie auf 'Start', um die Zeitmessung zu beginnen, und auf 'Pause', um sie anzuhalten
- Ein Signalton ertönt, wenn der Countdown endet
Hinweise zur Zeitmessung
- Browser-Timer können pausieren oder abweichen, wenn der Tab im Hintergrund ist, das Gerät schläft oder der Energiesparmodus aktiviert ist.
- Bei Meetings, Prüfungen oder Produktionsarbeiten empfiehlt es sich, eine Systemuhr oder einen dedizierten Timer als endgültige Referenz heranzuziehen.
Anwendungsfälle
Technisches Prinzip
Die Countdown-Engine verwendet nicht setInterval(callback, 1000) als verlässliche Uhr – dieser Ansatz akkumuliert Drift, da die HTML5-Event-Loop-Spezifikation nur eine Mindestverzögerung garantiert, aber keinen festen Takt. Stattdessen erfasst die Seite einen startTime über Date.now() (oder performance.now() für Sub-Millisekunden-Auflösung) und berechnet bei jedem Tick remaining = targetDuration - (Date.now() - startTime). Die Bildschirmaktualisierung wird von requestAnimationFrame gesteuert, das vom Browser auf die Display-VSync-Rate gedrosselt wird (typischerweise 60 Hz / 16,67 ms, manchmal 120 Hz bei Hochfrequenz-Laptops und -Handys). Dieses selbstkorrigierende Design hält die angezeigten Sekunden auch nach JavaScript-Task-Queue-Staus durch Garbage Collection oder lange Layouts mit der Echtzeit synchron. Hintergrunddrosselung ist die häufigste Ursache für Timer-Überraschungen. Gemäß dem HTML Living Standard klemmen versteckte Tabs setInterval/setTimeout auf ein Minimum von 1000 ms (Chrome, Firefox und Safari setzen dies mit eigenen Heuristiken um; Chrome friert inaktive Tabs nach etwa 5 Minuten im Akkubetrieb zusätzlich ein). Die Page Visibility API (document.visibilityState, document.hidden, das visibilitychange-Event) ermöglicht es dem Timer, einen Tab-Wechsel zu erkennen und seine interne Uhr beim Sichtbarwerden des Tabs gegen Date.now() abzugleichen. Der Countdown-End-Sound wird über die Web Audio API abgespielt (AudioContext + OscillatorNode oder ein vorgeladenes AudioBuffer), die auf iOS Safari und modernem Chrome eine vorherige Benutzergesten-Aktivierung benötigt, um die Autoplay-Richtlinie zu erfüllen. Zusätzlich wird ein bestmöglicher visueller Alarm gerendert, und wenn der Nutzer zuvor eine Erlaubnis erteilt hat, kann eine systemseitige Benachrichtigung über die Notification API gesendet werden. Der Multi-Timer-Modus hält jeden Timer in seinem eigenen Zustandsobjekt mit unabhängigem startTime; eine einzelne requestAnimationFrame-Schleife iteriert pro Frame über das Array, statt pro Timer ein separates Intervall zu starten, was die CPU-Last konstant hält, auch wenn die Anzahl wächst. Die Persistenz über Reloads hinweg nutzt localStorage mit einem serialisierten endTime, sodass die Seite beim Mounten die verbleibende Zeit neu berechnen kann. Zu beachten: Systemseitige Uhrkorrekturen (manuelle Zeitänderung, NTP-Sprung oder Sommerzeitwechsel) verschieben Date.now() schlagartig und können dazu führen, dass ein wiederhergestellter Timer sprungartig erscheint – performance.now() ist monoton und wird bevorzugt, wenn nur die verstrichene Zeit innerhalb eines einzelnen Seitenaufrufs relevant ist.
- Date.now() oder performance.now() als Quelle der Wahrheit verwenden; niemals akkumulierte setInterval-Ticks vertrauen.
- requestAnimationFrame begrenzt das Neuzeichnen auf die Display-VSync (60 Hz = ca. 16,67 ms; 120 Hz = ca. 8,33 ms).
- Versteckte Tabs drosseln setInterval auf ein Minimum von 1000 ms gemäß HTML-Spezifikation; Chrome kann die Seite nach ca. 5 Min. im Akkubetrieb einfrieren.
- Die Page Visibility API (visibilitychange-Event) ist der Ankerpunkt, um den Timer beim Zurückkehren des Tabs in den Vordergrund abzugleichen.
- Die Web Audio API benötigt auf iOS Safari und Chrome eine vorherige Benutzergesten-Aktivierung zur Erfüllung der Autoplay-Richtlinie.
- Die Notification API erfordert Notification.requestPermission() und einen sicheren Kontext (HTTPS oder localhost).
- performance.now() ist monoton über NTP-Sprünge und Sommerzeit-Wechsel hinweg; Date.now() ist es nicht – entsprechend wählen.
Beispiele
Pomodoro-Arbeitsblock (25 Min. Fokus + 5 Min. Pause)
Modus : Countdown
Dauer : 00 : 25 : 00
Start um : 14:00:00
Ende um : 14:25:00 (Alarm ertönt)
Danach : 5-Minuten-Pausentimer (voreingestellt)Kochen – weiches Ei (6 Min. 30 Sek.)
Modus : Countdown
Gesetzt : 00 : 06 : 30
Bei 1:00 -> visuelle Warnung hebt Restzeit hervor
Bei 0:00 -> Alarm + Banner: Countdown abgeschlossen!Stoppuhr mit Zwischenzeiten (1-km-Lauftraining)
Start -> 00:00.00
Runde 1 -> 04:12.80 (Splitzeit 04:12.80)
Runde 2 -> 08:31.45 (Splitzeit 04:18.65)
Runde 3 -> 12:48.10 (Splitzeit 04:16.65)
Ziel -> 16:55.30 (Splitzeit 04:07.20 schnellste)Multi-Timer für HIIT (30 s Belastung / 15 s Pause x 4)
Timer A: 00:30 (Belastung) -> Alarm
Timer B: 00:15 (Pause) -> Alarm
Timer C: 00:30 (Belastung) -> Alarm
Timer D: 00:15 (Pause) -> Alarm
Gesamteinheit: 3 Minuten; Tab im Vordergrund halten, damit Alarme pünktlich auslösen.Prüfungsaufsicht – 45-Minuten-Schreibblock
Dauer : 00 : 45 : 00
Start : 09:15:00
Ende : 10:00:00
Tipp: Tab im Vordergrund lassen – Hintergrund-Tabs können setInterval drosseln und über 45 Minuten um mehrere Sekunden abweichen.FAQ
Läuft der Countdown weiter, wenn ich den Tab wechsle?
Moderne Browser drosseln Hintergrund-Tabs auf etwa eine Aktualisierung pro Sekunde, um Akku zu sparen, sodass der angezeigte Wert kurz hinterherhinken kann – die zugrunde liegende Berechnung basiert aber auf absoluter Zeit, sodass die verstrichene Gesamtzeit korrekt bleibt. Sobald du den Tab fokussierst, springt die Anzeige auf den richtigen Wert.
Wird der Alarm ausgelöst, während der Tab im Hintergrund ist?
Audiowiedergabe in Hintergrund-Tabs wird von einigen Browsern und Energiespareinstellungen des Betriebssystems eingeschränkt. Der Alarm läuft über die Web Audio API und benötigt eine vorherige Nutzerinteraktion. Halte den Tab fokussiert oder sichtbar, wenn der Alarm wichtig ist.
Was passiert, wenn der Computer in den Ruhezustand geht?
Die Zeitberechnung des Countdowns basiert auf Date.now() (Wanduhrzeit) und läuft daher korrekt weiter, auch wenn das System geschlafen hat. Beim Aufwachen holt die Anzeige auf. Der akustische Alarm wird allerdings nicht ausgelöst, solange das System ausgesetzt ist.
Wie präzise ist der Timer?
Die Anzeige aktualisiert sich jede Sekunde, intern arbeitet die Seite aber mit millisekundengenauen Zeitstempeln. Die reale Präzision wird durch Browser-Tab-Throttling (Hintergrund-Tabs verlieren Genauigkeit) und durch die Audioausgabelatenz des Alarmtons begrenzt (typischerweise <100 ms). Für Physik- oder Audio-Engineering-Präzision nimm spezielle Hardware.
Kann ich Voreinstellungen für Dauern speichern?
Schnellauswahl-Buttons (5 min, 10 min, 25 min, 45 min, 1 Stunde) sind für gängige Dauern eingebaut. Es sind feste Verknüpfungen, keine selbst anpassbaren Presets. Beim Schließen des Tabs geht der aktuelle Timer-Stand verloren.
Was ist mit Sommer-/Winterzeit?
Der Countdown rechnet mit verstrichenen Sekunden, nicht mit Wanduhr-Datumsangaben, daher beeinflussen Zeitumstellungen ihn nicht. Ein 2-Stunden-Countdown, der 30 Minuten vor dem 'Spring forward' gestartet wurde, endet trotzdem korrekt 90 Minuten später.
Wird etwas hochgeladen?
Nein. Der Timer läuft komplett in deinem Browser. Eigene Presets und Verlauf werden auf Wunsch lokal gespeichert.