JSFiddle - React, Tailwind, and code Playground

by mauricederegt

HTML

<div class="tm">00:00:00</div>
<div id="p">Click to Start</div>
<div id="r">Click to Resume</div>

JavaScript

$(document).ready(function() {
    $('#p').click(function() {
        gameStart();
    });
    $('#r').click(function() {
        continueTimer();
    });
});


//Build timer
function getTimeText(v) {
    var vH = Math.floor(v / 3600000);
    var vM = Math.floor((v - (vH * 3600000)) / 60000);
    var vS = Math.floor((v - (vH * 3600000) - (vM * 60000)) / 1000);
    return set2Digit(vH) + ':' + set2Digit(vM) + ':' + set2Digit(vS);
}

function set2Digit(ov) {
    var os = '0' + ov;
    return os.substr(os.length - 2, 2);
}

//Set timer
function setTimer() {
    var n = new Date();
    tM.text(getTimeText(n.getTime() - oT.getTime()));
}

function gameStart() {
    oT = new Date();
    tI = setInterval("setTimer()", 1000);
}

//Test
function continueTimer() {
    var divObj = document.getElementById("tm");
    oT = new Date(divObj);
    tI = setInterval("setTimer()", 1000);
}