JSFiddle - React, Tailwind, and code Playground
HTML
<span id="minutes"></span>
<span id="seconds"></span>
<a href="#" id="start">Start</a>
<a href="#" id="stop">Stop</a>
<a href="#" id="pause">Pause</a>
<a href="#" id="resume">Resume</a>
JavaScript
var sec = 0;
var intPointer = null;
function pad(val) {
return val > 9 ? val : "0" + val;
}
function start() {
clearInterval(intPointer);
intPointer = setInterval(function() {
var secondsI = pad(++sec % 60);
var minutesI = pad(parseInt(sec / 60, 10));
document.getElementById("seconds").innerHTML = secondsI;
document.getElementById("minutes").innerHTML = minutesI;
}, 1000);
}
window.onload = function() {
document.getElementById('start').onclick = function(e) {
sec = 0;
document.getElementById("seconds").innerHTML = "00";
document.getElementById("minutes").innerHTML = "00";
start();
};
document.getElementById('stop').onclick = function(e) {
sec = 0;
document.getElementById("seconds").innerHTML = "00";
document.getElementById("minutes").innerHTML = "00";
clearInterval(intPointer);
};
document.getElementById('pause').onclick = function(e) {
clearInterval(intPointer);
};
document.getElementById('resume').onclick = function(e) {
start();
};
start();
}