JSFiddle - React, Tailwind, and code Playground
HTML
<body onload="init()">
<label id=count_label_ms></label>
<br>
<p>
<input type=button value="Start" onclick="start()" />
<input type=button value="Pause" onclick="pause()" />
<input type=button value="Reset" onclick="reset()" />
<input type=button value="Stop" onclick="stop()" />
</p>
</body>
JavaScript
var params = {
countms:0,
intervalTxt:null,
id: "count_label_ms",
startInit: 1,
char: "segundos",
isDate: false, //true or false
speed: 10000 //somente para tipo Date
};
function init(){
document.getElementById(params.id).innerHTML = 0 + " "+params.char;
if (params.isDate) {
var dateObj = new Date(0);
dateObj.setHours(0);
document.getElementById(params.id).innerHTML = dateFormat(dateObj) + " "+params.char;
}
}
function start()
{
if (params.intervalTxt == null) {
params.intervalTxt = setInterval(function() {
var content = (parseFloat(params.countms) / 100) + " "+params.char;
if (params.isDate) {
params.countms = params.countms + params.speed;
var dateObj = new Date(0);
dateObj.setHours(0);
dateObj.setMilliseconds(parseFloat(params.countms) / 100);
content = dateFormat(dateObj) + " "+params.char;
} else {
params.countms++;
}
document.getElementById(params.id).innerHTML = content;
}, params.startInit);
}
}
function pause()
{
if (params.intervalTxt != null) {
clearInterval(params.intervalTxt);
params.intervalTxt = null;
}
}
function reset()
{
clearInterval(params.intervalTxt);
params.intervalTxt = null;
params.countms = 0;
var content = 0 + " "+params.char;
if (params.isDate) {
params.countms = params.countms + params.startInit + params.speed;
var dateObj = new Date(0);
dateObj.setHours(0);
dateObj.setMilliseconds(0);
content = dateFormat(dateObj) + " "+params.char;
} else {
params.countms++;
}
document.getElementById(params.id).innerHTML = content;
start();
}
function stop()
{
...