<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)
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.