Stopwatch & Countdown

One tool, two very different timing problems

A stopwatch and a countdown look similar — both show digits ticking — but they solve opposite problems, and this tool keeps them on separate tabs because they need different engineering. A stopwatch measures an unknown duration as it unfolds: you press Start, do something, press Stop, and ask "how long did that take?" A countdown starts from a known duration and races toward zero, then alerts you. Picking the right tab is the first step, and the interface remembers each one's state independently while you switch between them.

How the stopwatch keeps accurate time

The Stopwatch tab times with performance.now(), a monotonic clock that only moves forward and is built for measuring elapsed time rather than telling the time of day. On Start it records an origin, and on every animation frame it computes elapsed = now − origin, displaying minutes, seconds, and three-digit milliseconds. The redraw is driven by requestAnimationFrame, which syncs to your screen's refresh so the digits stay smooth and the browser can pause updates on a hidden tab to save power.

The Lap button records two numbers per lap, and confusing them is the classic mistake. The total is the cumulative time since Start; the split is that lap alone — the gap from the previous lap mark. The tool computes split = total − previousTotal. Worked example: you tap Lap at 0:45, again at 1:50, again at 2:40. The totals are 0:45, 1:50, 2:40; the splits are 0:45, 1:05, and 0:50. As a consistency check, the splits always sum back to the final total. When you compare performance, watch the splits, not the totals — they tell you whether each lap got faster or slower.

Why the countdown uses a different clock

The Countdown tab takes your HH:MM:SS input, converts it to milliseconds, and computes a fixed target end time by adding that duration to Date.now(). Each tick it recomputes remaining = endTime − now. Anchoring to an absolute end time rather than counting down a decrementing variable means the timer stays correct even if the browser throttles the tab in the background and skips frames — when you return, it recalculates against the real wall-clock target and shows the right remaining time, rather than having "lost" the paused interval. The displayed seconds are rounded up, so a timer reads 00:00:01 right until the final moment instead of flashing zero early.

The alarm and why it sometimes stays silent

When the countdown hits zero, the tool plays a tone sequence generated with the Web Audio API — it creates an AudioContext and schedules oscillators rather than loading any sound file, so the alarm works fully offline. The common gotcha is mobile: iOS Safari (and some other browsers) refuse to produce audio until the user has interacted with the page. Because you start the countdown with a tap, that gesture unlocks audio — so always start the timer by tapping the button rather than expecting sound from a timer that began some other way. If you never touched the page, the alarm may be muted by the browser, not broken.

Practical use cases

• Stopwatch: timing laps at a track or pool, measuring how long a recurring task takes, or comparing two approaches with millisecond resolution.
• Countdown: cooking and baking, presentation rehearsals, timed exam practice, workout intervals, or a hard stop for a meeting agenda item.
• Both at once: run a countdown for a fixed work block while using the stopwatch to time a sub-task inside it — the tabs hold independent state.

Tips and limitations

• Keep the tab visible for the smoothest stopwatch. A backgrounded or suspended tab may throttle frames; the countdown self-corrects on return, but the stopwatch display only updates while it can paint.
• The countdown caps near 100 hours. Inputs allow up to 99h 59m 59s; for multi-day timing, a dedicated alarm or calendar reminder is the better tool.
• Pause and resume preserve elapsed time. Stopping the stopwatch banks the elapsed value so resuming continues from where you left off rather than restarting.
• Don't rely on it for legally precise timing. Browser scheduling introduces a few milliseconds of jitter — fine for everyday use, not for officiating.