Stopwatch Timer is slower than normal time-CodePudding

I want to make a stopwatch in JavaScript that could count milliseconds, seconds, minutes, and hours. The problem is that it seems to not go at the proper speed, meaning that when I compare it to other timers, it gradually becomes slower than them (i.e the speed at which the timer is counting slows down over time). So suddenly, there are 5-second differences, then it becomes 7-second differences, and so on. Any help would be appreciated. My code for Stopwatch.

var hr = 0;
var min = 0;
var sec = 0;
var count = 0;

var Startbutton = document.getElementById("Start");


var timer = false;

function start() {
  Startbutton.disabled = true; //this wil help to avoid multiple clicking on function
  timer = true;
  stopwatch();
}

function stop() {
  timer = false;
  Startbutton.disabled = false;

}

function reset() {
  timer = false;
  Startbutton.disabled = false;
  min = 0;
  hr = 0;
  sec = 0;
  count = 0;

  document.getElementById("hr").innerHTML = "00";
  document.getElementById("min").innerHTML = "00";
  document.getElementById("sec").innerHTML = "00";
  document.getElementById("count").innerHTML = "00";
}

function stopwatch() {
  if (timer) {
      count;
    if (count > 99) {
        sec;
      count = 0;
    }
    if (sec > 59) {
      min  ;
      sec = 0;
    }
    if (min > 59) {
      hr  ;
      min = 0;
      sec = 0;
    }
    if (hr > 23) {
      hr = 0;
      sec = 0;
      min = 0;
    }

    var hrString = hr;
    var minString = min;
    var secString = sec;
    var countString = count;

    if (hr < 10) {
      hrString = "0"   hrString;
    }
    if (min < 10) {
      minString = "0"   minString;
    }
    if (sec < 10) {
      secString = "0"   secString;
    }
    if (count < 10) {
      countString = "0"   countString;
    }
    document.getElementById("hr").innerHTML = hrString;
    document.getElementById("min").innerHTML = minString;
    document.getElementById("sec").innerHTML = secString;
    document.getElementById("count").innerHTML = countString;
    console.log("hello");
    setTimeout(stopwatch, 10);
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Stopwatch</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div id="container">
    <div id="time">
      <span  id="hr">00</span>
      <span >Hr</span>

      <span  id="min">00</span>
      <span >Min</span>

      <span  id="sec">00</span>
      <span >Sec</span>


      <span  id="count">00</span>

    </div>
    <div id="btn-container">
      <button  id="Start" onclick="start()">Start</button>
      <button  id="Stop" onclick="stop()">Stop</button>
      <button  id="Reset" onclick="reset()">Reset</button>
    </div>
  </div>


  <script src="script.js"></script>
</body>

</html>

CodePudding user response：

Because you don't take into account the time it takes for it to draw the html. Need to re-design to use system clock. See my example.

var hr = 0;
var min = 0;
var sec = 0;
var count = 0;

var Startbutton = document.getElementById("Start");


var timer = false;
var start_time;

function start() {
  Startbutton.disabled = true; //this wil help to avoid multiple clicking on function
  timer = true;
  start_time = (new Date()).getTime();
  stopwatch();
}

function stop() {
  timer = false;
  start_time = null;
  Startbutton.disabled = false;

}

function reset() {
  timer = false;
  start_time = null;
  Startbutton.disabled = false;
  min = 0;
  hr = 0;
  sec = 0;
  count = 0;

  document.getElementById("hr").innerHTML = "00";
  document.getElementById("min").innerHTML = "00";
  document.getElementById("sec").innerHTML = "00";
  document.getElementById("count").innerHTML = "00";
}

function stopwatch() {
  var now = (new Date()).getTime();
  var diff = now - start_time;
  
  
  if (timer) {
    var str_time = (new Date(diff).toISOString().slice(11, 23)); //