JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<span id="Hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>
</div>
<button onclick="timer()">Start</button>
<button onclick="clearTimer()">Stop</button>
JavaScript
var totalSeconds,
timer_handle;
function setTime() {
++totalSeconds;
document.getElementById("seconds").innerHTML = pad(totalSeconds % 60);
document.getElementById("minutes").innerHTML = pad(parseInt(totalSeconds / 60, 10));
document.getElementById("Hours").innerHTML = pad(parseInt(totalSeconds / 360, 10));
}
function pad(val) {
var valString = val + "";
if (valString.length < 2) {
return "0" + valString;
} else {
return valString;
}
}
function timer() {
if (!timer_handle) {
totalSeconds = 0;
timer_handle = setInterval(setTime, 1000);
}
}
function clearTimer() {
if (timer_handle) {
clearInterval(timer_handle);
}
alert(document.getElementById("minutes").innerHTML + ':' + document.getElementById("seconds").innerHTML);
}