Stop Watch Script JavaScript

Add a lightweight stop watch to your site with start stop and reset controls

View Example Modern Snippet FAQ
Script Title: Stop Watch Script
Description: Basic stop watch with start stop and reset features

Live Example

Uses your device clock and updates smoothly

No libraries
Elapsed time
00:00:00
Ready

Modern stop watch snippet

Paste this in your page and connect the buttons to start stop and reset 

<div id="swOut">00:00:00</div>
<button id="swStart" type="button">Start</button>
<button id="swStop" type="button" disabled>Stop</button>
<button id="swReset" type="button">Reset</button>

<script>
(function () {
  var out = document.getElementById("swOut");
  var btnStart = document.getElementById("swStart");
  var btnStop = document.getElementById("swStop");
  var btnReset = document.getElementById("swReset");

  var running = false;
  var rafId = 0;
  var startMark = 0;
  var elapsedMs = 0;

  function pad2(n) { return String(n).padStart(2, "0"); }

  function format(ms) {
    var totalCs = Math.floor(ms / 10);
    var cs = totalCs % 100;
    var totalSec = Math.floor(totalCs / 100);
    var sec = totalSec % 60;
    var min = Math.floor(totalSec / 60);

    return pad2(min) + ":" + pad2(sec) + ":" + pad2(cs);
  }

  function render() {
    out.textContent = format(elapsedMs);
  }

  function tick(now) {
    if (!running) return;
    elapsedMs = (now - startMark);
    render();
    rafId = requestAnimationFrame(tick);
  }

  function start() {
    if (running) return;
    running = true;
    btnStart.disabled = true;
    btnStop.disabled = false;
    startMark = performance.now() - elapsedMs;
    rafId = requestAnimationFrame(tick);
  }

  function stop() {
    if (!running) return;
    running = false;
    btnStart.disabled = false;
    btnStop.disabled = true;
    cancelAnimationFrame(rafId);
    render();
  }

  function reset() {
    stop();
    elapsedMs = 0;
    render();
  }

  btnStart.addEventListener("click", start);
  btnStop.addEventListener("click", stop);
  btnReset.addEventListener("click", reset);

  render();
})();
</script>

FAQ

Add an hours value in the format function and prepend it to the output string

Yes call start after the DOM is ready or call it at the end of the script block

No you can use setInterval but requestAnimationFrame is smooth and efficient for frequent updates