Countdown Timer

A countdown timer is a simple time-control tool that starts from a chosen duration and counts down to zero. Common uses include focused work, cooking, exercise intervals, classroom activities, meetings, speeches, and any task where a fixed time box matters more than the current clock time. Unlike a stopwatch, which measures elapsed time upward from zero, a countdown timer creates a visible endpoint and can warn you as the remaining time becomes short. This page also includes stopwatch and multi-timer modes, so it can handle lap timing and several small timers in one place. Because it runs in the open browser tab, it should be kept visible or active when the reminder is important.

The countdown engine does not use setInterval(callback, 1000) as an authoritative clock - that approach accumulates drift because the HTML5 event-loop spec only guarantees a minimum delay, not a fixed cadence. Instead, the page records a startTime via Date.now() (or performance.now() for sub-millisecond resolution) and on each tick computes remaining = targetDuration - (Date.now() - startTime). The display refresh is driven by requestAnimationFrame, which is throttled by the browser to the display vsync rate (typically 60 Hz / 16.67 ms, sometimes 120 Hz on high-refresh laptops and phones). This self-correcting design keeps the displayed seconds aligned with wall-clock time even after the JavaScript task queue stalls for garbage collection or a long layout. Background throttling is the dominant source of timer surprises. Per the HTML Living Standard, hidden tabs clamp setInterval/setTimeout to a minimum of 1000 ms (Chrome, Firefox, Safari implement this with their own heuristics; Chrome additionally freezes inactive tabs after about 5 minutes on battery). The Page Visibility API (document.visibilityState, document.hidden, the visibilitychange event) lets the timer detect a tab switch and reconcile its internal clock against Date.now() when the tab becomes visible again. The end-of-countdown sound is played through the Web Audio API (AudioContext + OscillatorNode or a preloaded AudioBuffer), which requires a prior user-gesture activation on iOS Safari and modern Chrome to satisfy autoplay policy. A best-effort visual alert is also rendered, and if the user has previously granted permission, an OS-level toast can be posted through the Notification API. Multi-timer mode keeps each timer in its own state object with an independent startTime; a single requestAnimationFrame loop iterates over the array each frame rather than spinning a separate interval per timer, which keeps CPU work flat as the count grows. Persistence across reloads uses localStorage with a serialized endTime, so the page can recompute remaining time on mount. Be aware that wall-clock corrections by the OS (manual time change, NTP step, or daylight-saving transition) shift Date.now() instantly and can make a recovered timer appear to jump - performance.now() is monotonic and is preferred when only elapsed time matters within a single page load.

• Use Date.now() or performance.now() as the source of truth; never trust accumulated setInterval ticks.
• requestAnimationFrame caps repaint at the display vsync (60 Hz = ~16.67 ms; 120 Hz = ~8.33 ms).
• Hidden tabs throttle setInterval to a 1000 ms minimum per HTML spec; Chrome may freeze the page after ~5 min on battery.
• Page Visibility API (visibilitychange event) is the hook for reconciling the timer when the tab returns to foreground.
• Web Audio API needs a prior user-gesture activation on iOS Safari and Chrome to satisfy autoplay policy.
• Notification API requires Notification.requestPermission() and a secure context (HTTPS or localhost).
• performance.now() is monotonic across NTP steps and DST jumps; Date.now() is not - choose accordingly.