ToolActToolAct

Online Stopwatch

Free online stopwatch with millisecond precision and lap timing

00:00:00.000

What is an Online Stopwatch?

An online stopwatch is a precision timing tool that measures elapsed time from zero upward, typically with millisecond resolution. Unlike a countdown timer that races toward a deadline, a stopwatch answers "how long did that take?" — making it ideal for sports training, lab experiments, presentations, cooking, coding sprints, and any activity where you need to track duration rather than enforce a fixed endpoint. This tool runs entirely in your browser using requestAnimationFrame for smooth display updates and performance.now() for monotonic time measurement, so it stays accurate even when the system clock is adjusted. Lap recording lets you capture split times with best/worst highlighting, and all data stays local — nothing is uploaded.

How to Use

Quick Start

  1. Click 'Start' to begin timing — the display shows hours:minutes:seconds.milliseconds
  2. Click 'Lap' to record a split time while the stopwatch keeps running
  3. Click 'Pause' to freeze the display, then 'Start' to resume
  4. Click 'Reset' to clear the timer and all lap records

Timing Tips

  • The stopwatch uses requestAnimationFrame for ~16ms display updates and performance.now() for accurate elapsed time.
  • Leave the tab visible for the smoothest display. Background tabs may throttle animation frames.
  • Lap times are color-coded: green for the fastest lap, red for the slowest.

Use Cases

Sports and fitness trainingTime running laps, swimming intervals, cycling splits, or gym circuits. Record each lap to see which rounds were fastest or slowest, helping you pace yourself and track improvement over time.
Lab experiments and data collectionMeasure reaction times, time chemical processes, or record observation intervals. The millisecond display gives you the precision needed for scientific timing without requiring specialized hardware.
Presentations and public speakingTime your talk, presentation, or pitch rehearsal. Use lap splits to time individual sections or slides, then review which parts took the longest and adjust your pacing.
Cooking and bakingTrack how long each step actually takes — from prep to plating. Lap recording lets you measure individual stages (chopping, sauteing, resting) while keeping the overall clock running.
Coding sprints and productivityTime coding sessions, debugging efforts, or Pomodoro-style work blocks. The stopwatch keeps running until you stop it, so you get an honest measure of how long a task really took.

Technical Principle

The stopwatch engine avoids the drift-prone setInterval pattern entirely. Instead, it uses requestAnimationFrame (rAF) for display updates and performance.now() as the authoritative time source. When the user clicks Start, the engine records the current performance.now() timestamp as startTime. On each animation frame, it computes elapsed = accumulated + (performance.now() - startTime), where accumulated holds the total elapsed time before the most recent pause. This two-variable model (accumulated + runtime delta) handles pause/resume cycles correctly without losing sub-millisecond precision. performance.now() is chosen over Date.now() because it is monotonic — it never jumps backward due to NTP corrections, manual clock changes, or daylight saving transitions. It also provides sub-millisecond resolution (typically 5 µs granularity in modern browsers), making it the right clock for short-duration, high-precision timing. The rAF callback is throttled to the display refresh rate (typically 60 Hz = ~16.67 ms, up to 120 Hz on high-refresh displays), so the visual update is smooth but not the source of truth — the actual elapsed time comes from the performance.now() calculation, which is continuously correct. Lap recording captures the current elapsedMs at the moment the Lap button is clicked, computing the split difference against the previous lap's total. Best and worst laps are determined by comparing all lap diffs with Math.min/Math.max, and the display highlights these with green and red styling respectively. All state lives in React useState hooks within the client component, and no data is persisted or transmitted — the stopwatch is ephemeral by design, resetting completely when the page is closed or the Reset button is pressed.

  • performance.now() provides monotonic, sub-millisecond timestamps — immune to system clock changes.
  • requestAnimationFrame drives display updates at the display refresh rate (60–120 Hz) for smooth rendering.
  • Accumulated time + runtime delta model handles pause/resume without precision loss.
  • Lap diffs are computed as currentTotal - previousTotal for accurate split timing.
  • All computation runs locally in the browser; no server round-trips or data uploads.

Examples

Running track — 400m lap splits

Lap 1  -> 01:12.450  (+01:12.450)
Lap 2  -> 02:26.180  (+01:13.730)
Lap 3  -> 03:38.910  (+01:12.730)
Lap 4  -> 04:50.320  (+01:11.410  fastest)

Presentation rehearsal — slide timing

Intro      -> 00:45.200  (+00:45.200)
Problem    -> 02:10.850  (+01:25.650)
Solution   -> 04:35.120  (+02:24.270)
Demo       -> 07:10.430  (+02:35.310)
Conclusion -> 08:25.610  (+01:15.180)
Total: 8 min 25 sec — under the 10 min target

HIIT workout — interval tracking

Round 1  -> 00:30.150  (+00:30.150)
Rest 1   -> 00:45.320  (+00:15.170)
Round 2  -> 01:15.480  (+00:30.160)
Rest 2   -> 01:30.510  (+00:15.030)
Round 3  -> 02:00.670  (+00:30.160  slowest)
Round 4  -> 02:30.520  (+00:29.850  fastest)

FAQ

How accurate is the stopwatch?

The stopwatch uses performance.now() which provides sub-millisecond precision (typically 5 microsecond granularity). The display updates at roughly 60 frames per second via requestAnimationFrame, so the visual update is smooth and within 16ms of the true value. For most practical purposes — sports, cooking, presentations — this is more than sufficient.

Does the stopwatch keep running if I switch tabs?

Yes. The elapsed time is calculated from the absolute performance.now() timestamp, not from cumulative ticks. When you switch back to the tab, the display immediately shows the correct elapsed time. However, requestAnimationFrame is throttled in background tabs, so the visual update may pause until you return.

What happens if my computer sleeps?

performance.now() is monotonic but does not advance while the system is suspended. When the computer wakes, the stopwatch display will show the elapsed time as if the system was never asleep — it will NOT include the sleep duration. This is the correct behavior for most timing use cases.

Can I export or save my lap times?

The stopwatch does not currently save or export lap data. All lap records are held in memory and cleared when you reset the timer or close the page. For persistent recording, consider copying the displayed times manually or using a dedicated fitness tracker.

Why use performance.now() instead of Date.now()?

performance.now() is monotonic — it never goes backward. Date.now() can jump by seconds or minutes when the system clock is adjusted (NTP sync, manual change, daylight saving). For short-duration timing, performance.now() is the correct choice. It also offers sub-millisecond resolution, unlike Date.now()'s millisecond resolution.

Is any data uploaded to a server?

No. The stopwatch runs entirely in your browser. No timing data, lap records, or usage information is sent to any server. The page works offline once loaded.

What's the difference between a stopwatch and a countdown timer?

A stopwatch measures elapsed time upward from zero — it answers 'how long did it take?' A countdown timer starts from a set duration and counts down to zero — it answers 'how much time is left?' This tool is a stopwatch; for countdown functionality, use the Countdown Timer tool.