<div id="timer" class="timer">0</div>
<button id="start">Start</button>
<button id="stop">Stop</button>
html, body {
  display: grid;
  justify-content: center;
  align-content: center;
  
  height: 100%;
}

.timer {
  font-size: 4rem;
  text-align: center;
}
const $timer = document.getElementById('timer')
const $start = document.getElementById('start')
const $stop = document.getElementById('stop')

let id = 0

$start.addEventListener('click', function () {
   let timer = 0
   $timer.textContent = 0
   id = setInterval(function () {
     timer++
     $timer.textContent = timer
   }, 1000)
})

$stop.addEventListener('click', function () {
  clearInterval(id)
  
})
 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.