JSFiddle - React, Tailwind, and code Playground
HTML
Chrono 1
<div id="showtm1" style="font-size:21px; font-weight:800;">0:0</div>
<button onclick="compteur1.start();">Start</button>
<button onclick="compteur1.stop();">Stop</button>
<br>
Chrono 2
<div id="showtm2" style="font-size:21px; font-weight:800;">0:0</div>
<button onclick="compteur2.start();">Start</button>
<button onclick="compteur2.stop();">Stop</button>
JavaScript
var Compteur = function( id ) {
"use strict";
var seconds = 0,
startchron = 0,
timeCase = document.getElementById( id );
function chronometer() {
if ( startchron === 1 ) {
seconds += 1;
timeCase.innerHTML = seconds;
setTimeout( chronometer, 1000 );
}
};
this.start = function( chrono ) {
startchron = 1;
chronometer();
};
this.stop = function( chrono ) {
startchron = 0;
};
};
var compteur1 = new Compteur( "showtm1" );
var compteur2 = new Compteur( "showtm2" );