JSFiddle - React, Tailwind, and code Playground
HTML
<div id="timer">
<span id="minute" class="dis">00</span> :
<span id="second" class="dis">00</span> :
<span id="milisecond" class="dis">00</span>
</div>
<input type="button" value="Start/Stop" id="startStop" />
<input type="button" value="Reset" id="reset" />
JavaScript
var a = false;
var dl = 10;
var El = function(id) { return document.getElementById(id);};
var start = null; // starting time of current measurement
var offset = 0; // offset for previous measurement
function dsp() {
var tmp = new Date(new Date() - start + offset ); // calculate the time
var ms = tmp.getMilliseconds();
var m = tmp.getMinutes();
var s = tmp.getSeconds();
El('milisecond').innerHTML = ms;
El('second').innerHTML = s < 10 ? '0' + s : s;
El('minute').innerHTML = m < 10 ? '0' + m : m;
}
function r() {
a = true;
var els = document.getElementsByClassName('dis');
sw();
offset = 0;
for(var i in els) {
els[i].innerHTML = '00';
}
}
function sw() {
if(a){
// If the timer stops save the current value
offset += new Date() - start;
}else
start = new Date();
a ? clearInterval(t) : t = setInterval(dsp, dl);
a = !a;
}
document.getElementById('startStop').addEventListener('click', sw, true);
document.getElementById('reset').addEventListener('click', r, true);