Stopwatch & Countdown Timer

Stopwatch counts up from zero — use it to measure how long something takes. Cooking a recipe, timing a workout interval, recording a presentation rehearsal, benchmarking a manual task at work, tracking how long a kid takes on homework.

Countdown counts down from a set duration to zero — use it when you need to stop or be alerted at a fixed time. Pomodoro work blocks, HIIT intervals, oven timers, meeting time-boxing, study sprints, exam practice. The audible alert at zero is the entire point.

Both run on requestAnimationFrame for monitor-refresh-rate accuracy (typically 60 or 120 Hz). The display refreshes at every frame; the underlying time is measured with performance.now() which has sub-millisecond resolution.

Most browser timer tutorials use setInterval with a 10 ms or 100 ms tick, then increment a counter. That approach drifts: setInterval is throttled to 1000 ms in background tabs and accumulates rounding error over long runs.

This stopwatch instead records a single performance.now() timestamp at start and computes elapsed = now − start on every animation frame. There's no drift — even after running for an hour, the displayed time matches the actual wall-clock elapsed within a few milliseconds.

Pause and resume work by accumulating the elapsed delta into a running total when you pause, then restarting the start timestamp when you resume. The accumulated total survives any number of pause/resume cycles without losing precision.

Lap times are snapshots of the running elapsed value; they don't reset the running stopwatch. You can record dozens of laps without affecting the main timer.

Pomodoro: 25-minute countdown for focused work, 5-minute break. Stack four cycles, then a 15–30 minute longer break. The audible alert lets you fully ignore the timer until it fires.

HIIT and Tabata: 20 seconds work + 10 seconds rest × 8 rounds. Use the lap button on the stopwatch to record each round, or set a 4-minute countdown and watch the seconds for transitions.

Cooking: countdown for hands-off baking and roasting. Use the stopwatch for sear-and-rest work where you need to know exactly how long the protein has been resting.

Speech and presentation: stopwatch in front of you during practice; countdown when you have a hard time limit (TED talks, lightning talks, sales pitches).

Tip: keep this tab open in the foreground for the most accurate countdown — background tabs throttle requestAnimationFrame to ~1 frame per second to save battery, which doesn't affect total elapsed but does affect display refresh.

Background-tab throttling: Chrome and Safari throttle background tabs aggressively. The countdown still fires the alarm at the right time (because we use a wall-clock check, not a tick counter), but the display won't update smoothly.

Sleeping computer: if your laptop sleeps, browser timers pause entirely. The countdown will resume from where it stopped, not where it should be — for any timing that must run during sleep, use a phone alarm or OS-level scheduler.

Audible alert blocked: most browsers block auto-played audio until you've interacted with the page. Click Start once and the alert at zero will play; if you load this page in a background tab and never click, the audio context can't initialize.

Lap accuracy: laps capture the elapsed time at the moment you click. Reaction time is ~200 ms — for sub-second precision, use video review instead of a manual lap button.