Stopwatch and Timer

What the Stopwatch and Timer Does

The Stopwatch tab counts up from zero — Start, Pause to hold, Lap to record a split, Reset to clear. The Timer tab counts down: type a number of minutes, press Start, and watch it run to zero, where the display turns red to signal that time is up.

Both read the actual wall-clock time rather than counting frames, so a brief stutter or a busy page does not make them drift. The trade-off worth knowing up front: the end-of-timer signal is visual only — the numbers turn red — so keep the tab in view if missing the end would matter.

How It Works

The clock you see is refreshed with requestAnimationFrame, the browser's repaint-synced loop, which keeps the digits smooth without draining the battery. But the elapsed and remaining time are computed from Date.now() — your device's wall clock — not by adding up frames. That separation is what keeps it honest: even if a refresh is skipped, the next reading is still correct.

One consequence follows from that. When a tab goes to the background the browser pauses requestAnimationFrame, so the on-screen number freezes. The moment you return, it recalculates from the wall clock and snaps to the right value — it does not lose the time, it simply could not repaint while hidden.

Generation algorithm

1. Pick a mode. Stopwatch counts up from zero; Timer counts down from the minutes you enter (it opens at 5).
2. Mark a start time. On Start the tool records the wall-clock time, and for a timer the target end time.
3. Refresh the display. requestAnimationFrame redraws the digits in sync with the screen; the value shown is computed from the wall clock each frame.
4. Handle laps and pause. Lap snapshots the current reading; Pause banks the elapsed time so resuming continues from there.
5. Signal the end. When a timer reaches zero the readout stops at 00:00.0 and turns red.

Technical Details

Standards & references

• Date.now (wall clock) — the device timestamp the elapsed and remaining time are computed from, so the reading does not drift with frame rate.
• requestAnimationFrame — the browser loop synced to the display refresh; it redraws the digits smoothly and pauses while a tab is hidden.
• Background-tab throttling — browsers pause the refresh loop and throttle timers in hidden tabs; the display pauses, but the wall-clock math stays correct.

Accuracy & Limitations

Accurate to about a tenth of a second — that is the display precision. The underlying time comes from your device clock, so it will not drift the way a naive frame-counter would, but this is a convenience timer, not a calibrated instrument for sports finishes or lab work.

The timer's only alert is visual: the numbers turn red at zero. There is no beep and no browser notification, so do not rely on it while the tab is hidden or your attention is elsewhere.

In a background or inactive tab the display stops updating, because the browser pauses the refresh loop to save power. Switch back and it immediately shows the correct time — nothing is lost, it just could not draw while hidden.

Nothing is saved. Refreshing or closing the tab resets the stopwatch, the laps and the timer to zero.

Long runs are fine — past 99 minutes the readout simply shows more digits — but the page has to stay open for the count to continue.

Real-World Use Cases

When to use it — and when not to

Want a 25-minute focus preset? Use the Pomodoro timer. Want it to open straight on countdown? Use the countdown timer. Counting down to a calendar date is a different kind of tool.

Frequently Asked Questions

References

• Window.requestAnimationFrame() (MDN)
• Date.now() (MDN)
• Heavy throttling of chained timers in background tabs (Chrome for Developers)

Related Tools