JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Stopwatch</h1>
<p>Time(milliseconds): <span id="time">0</span></p>
<input type="button" id="startstop" value="Start" />
CSS
body {
font: 100%/40px helvetica, arial, sans-serif;
}
h1 {
font-size: 30px;
}
JavaScript
var start = false;
var d1;
var d2;
var d3;
var currentTime;
var endTime;
var realtimeInterval;
$('#startstop').click(function(){
$this = $(this);
if(start === false){
realtimeCount();
d1 = new Date();
currentTime = d1.getTime();
start = true;
$this.val('Stop');
}
else {
d2 = new Date();
endTime = d2.getTime();
stopwatchTime = endTime-currentTime;
clearInterval(realtimeInterval);
$('#time').html(stopwatchTime);
start = false;
$this.val('Start');
}
});
var realtimeCount = function(){
realtimeInterval = setInterval(function(){
d3 = new Date();
realtimeCurrent = d3.getTime();
realtimeVal = realtimeCurrent-currentTime;
$('#time').text(realtimeVal);
}, 1);
}