<body onload="startClock()">
  <div id="current-time">12:00:00</div>
</body>
body {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}

#current-time {
  color: #9b6394;
  font-family: monospace;
  font-size: 4em;
  font-weight: 800;
}
View Compiled
const startClock = () => {
  const now = new Date();
  const h = padWithZeroes(now.getHours(), 2);
  const m = padWithZeroes(now.getMinutes(), 2);
  const s = padWithZeroes(now.getSeconds(), 2);
  document.getElementById("current-time").innerHTML = `${h}:${m}:${s}`;
  setTimeout(startClock, 500);
};

const padWithZeroes = (input, length) => {
  let padded = input;
  if (typeof input !== "string") padded = input.toString();
  return padded.padStart(length, "0");
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.