🕰 Cron Clock Stop Watch - Start/Stop Timer

cron-clock.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<p id=_e style=color:red;font-size:1rem></p><script>onerror=(msg, url, line, col)=>_e.innerHTML=`${[url, line, col].join(":")} ${msg}`</script>

<div class="container text-center">
  <p id=o></p>
  <button id="ssBtn" class="btn btn-primary btn-lg" onclick="startStop()">Start</button>
  <button class="btn btn-secondary btn-lg" onclick="location.reload()">Reset</button>
</div>

<style>
body { font-size:12vw; text-align:center }
button { width: 40%; font-size:8vw; }
</style>

<script>
const f = Math.floor;
const UNITS = [36e4, 6e4, 1e3];
const pad = n => n < 10 ? "0" + n : n;
const now = () => new Date().getTime();
const render = t => {
  o.innerHTML = `${UNITS.map(u => {
    let n = 0;
    if (t >= u) {
      n = f(t / u);
      t %= u;
    }
    return pad(n);
  }).join(":")}.${pad(f(t/10))}`;
};

let time = 0;
let start = 0;
let accrued = 0;
let go = false;
let interval;
let temp = 0;

render(accrued);
ssBtn.onclick = () => {
  go = !go;
  start = now() - accrued;
  ssBtn.innerHTML = go ? "Stop" : "Start";
  if (go) interval = setInterval(() => {
    render(accrued = now() - start);
  }, 16);
  else clearInterval(interval);
};
</script>