Stopwatch

About Stopwatch

This online stopwatch provides precise elapsed time measurement with start, pause, reset, and lap recording functionality. It uses JavaScript's high-resolution timestamps (Date.now()) for accurate time tracking, updating the display every 100 milliseconds.

The stopwatch continues tracking accurately even when the browser tab is in the background, as it calculates elapsed time from stored timestamps rather than counting timer intervals. This makes it suitable for long-duration timing tasks.

Stopwatch Display Format

The display shows time in HH:MM:SS.d format (hours, minutes, seconds, tenths of seconds):

Format: HH:MM:SS.d
  HH = Hours (00-99)
  MM = Minutes (00-59)
  SS = Seconds (00-59)
  d  = Deciseconds (tenths of seconds, 0-9)

Examples:
  00:00:00.0 = Start (zero elapsed time)
  00:01:30.5 = 1 minute, 30.5 seconds
  01:00:00.0 = Exactly 1 hour
  02:45:30.0 = 2 hours, 45 minutes, 30 seconds

Stopwatch Algorithm Implementation

This stopwatch uses timestamp-based timing rather than interval counting for accuracy:

// Stopwatch uses Date.now() timestamps for accuracy

let startTime = 0;      // Timestamp when started
let elapsed = 0;        // Accumulated elapsed time (ms)
let timerId = null;     // setInterval reference
let laps = [];          // Lap times array

function start() {
  if (timerId) return;  // Already running
  startTime = Date.now();
  timerId = setInterval(updateDisplay, 100);
}

function pause() {
  if (!timerId) return;
  clearInterval(timerId);
  elapsed += Date.now() - startTime;  // Accumulate elapsed
  timerId = null;
}

function reset() {
  pause();
  elapsed = 0;
  laps = [];
  updateDisplay();
}

function updateDisplay() {
  const total = elapsed + (timerId ? Date.now() - startTime : 0);
  const h = Math.floor(total / 3600000);
  const m = Math.floor((total % 3600000) / 60000);
  const s = Math.floor((total % 60000) / 1000);
  const d = Math.floor((total % 1000) / 100);
  display.textContent =
    String(h).padStart(2, '0') + ':' +
    String(m).padStart(2, '0') + ':' +
    String(s).padStart(2, '0') + '.' + d;
}

function recordLap() {
  const currentTotal = elapsed + (timerId ? Date.now() - startTime : 0);
  const lastLapTotal = laps.length > 0 ? laps[laps.length - 1].total : 0;
  laps.push({
    lap: laps.length + 1,
    time: currentTotal - lastLapTotal,  // This lap duration
    total: currentTotal
  });
  renderLaps();
}

Browser Timer Accuracy Comparison

Why Timestamp-Based Timing is More Accurate

Many simple stopwatches use setInterval alone to count elapsed time, but this approach accumulates errors:

Interval-Based (Less Accurate):
  let count = 0;
  setInterval(() => { count += 100; }, 100);
  // Problem: Browser may delay callbacks
  // After 10 seconds real time, count might be 9500 or 10500

Timestamp-Based (More Accurate):
  const start = Date.now();
  setInterval(() => {
    const elapsed = Date.now() - start;
    // Always shows correct elapsed time
    // Display may lag, but calculation is accurate
  }, 100);

Common Stopwatch Use Cases

Time Format Reference

Stopwatch vs Timer: When to Use Each