Overview
A precision stopwatch with lap timing, built on the browser's high-resolution clock. It displays hours, minutes, seconds, and centiseconds, keeps a lap table of splits and cumulative totals, and stays accurate even if the tab is throttled, because elapsed time is computed from timestamps rather than by counting ticks.
How It Works
Press Start and the readout runs; the button becomes Pause, and resuming continues from the same elapsed time. While running, press Lap to stamp the current elapsed time — the table records each lap's split time (the difference from the previous lap) and the running total, newest lap first. Reset stops the clock and clears both the readout and the lap history.
Step-by-Step Usage Guide
- Press Start to begin timing.
- Press Lap at each milestone to record a split.
- Pause and Resume to handle interruptions without losing elapsed time.
- Reset only when you are done — it clears the laps too.
Technical Specifications & Standards
Accuracy comes from the design: the stopwatch stores a start reference and, on every animation frame, recomputes elapsed time as the difference between the current performance.now() reading and that reference — a monotonic high-resolution clock immune to system clock adjustments like NTP corrections or a user changing the wall time. RequestAnimationFrame only drives the display; pausing does not lose time because the resume point is recalculated from the stored reference plus the already-elapsed value. Centiseconds are displayed (two digits, flooring the third), so the readout is honest about the precision it claims. The lap system stores cumulative elapsed times and derives each split by subtraction, which is the numerically stable way to get splits. One caveat: because rendering rides on requestAnimationFrame, a hidden tab stops repainting — the clock itself does not lose time, but you will not see updates until you return, and the lap history is not persisted, so a refresh clears everything including running time.
Targeted Use Cases
- Timing code benchmarks or page loads to the centisecond.
- Tracking split times in workouts or study rounds.
- Meeting facilitation: timing speakers' segments fairly.
- Comparing how long repeated tasks really take before estimating them.
Notes & Gotchas
- Lap whenever a segment ends rather than estimating later — splits are subtracted automatically.
- Copy lap numbers before a refresh; the history is not saved.
- Keep the tab visible while timing so you can see updates live.
- Trust the totals over a wall clock, since elapsed time comes from a monotonic source.
Frequently Asked Questions
How accurate is the stopwatch?
Elapsed time derives from performance.now(), a monotonic high-resolution clock, recomputed every frame — so it neither drifts with tick counts nor jumps when the system clock changes. The display reports to centiseconds.
What is the difference between lap time and total in the table?
Each row's lap time is the split since the previous lap (computed by subtraction), while the total is the cumulative elapsed time at that moment. Newest laps appear at the top.
Does the stopwatch keep running in a background tab?
Yes — the elapsed time keeps accumulating from timestamps — but the display stops repainting because the browser pauses animation frames. Return to the tab and the readout shows the correct elapsed time.
Is the lap history saved between sessions?
No. Laps and the running time live in component state; a refresh clears them. Note down any lap values you need before reloading the page.