how to make count timer increase in hour, minute, seconds in javascript?

Question

i want to make count timer from 00:00:00, the count start if "div id = data" is filled with "const date" and the time increase until the code receive stop trigger. how i can achieve that?

here is my current code :

<div id="data"></div>
<p id="demo"></p>

<script>
const api_url = 'json.php'
async function okejson() {
            const resp = await fetch(api_url);
            const dat = await resp.json();
            const awal = (dat[0])
            const date = awal.tanggal
            document.getElementById("data").innerHtml = date

var distance = 0;
var x = setInterval(function() {
distance +=1;
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
  
}, 1000); }
</script>

Answer 1

Using setInterval will not yeild accurate results. It is acceptable for short periods and non critical applications. If it may take hours you should consider using system clock. However here is a constructor which you can use to generate an object which has a start (and also stop and reset) method on it. The start method accepts a callback function which it will call each second and passes an object with days , hours , minutes , and seconds properties. You can use it to do whatever you want.

function Timer() {
 this.value = 0
 this.updateCb = null
 this.interval = null

 function getTime() {
   console.log(this.value)
   var seconds = this.value % 60
   var minutes = Math.floor(this.value / 60)
   var hours = Math.floor(this.value / 3600)
   var days = Math.floor(this.value / (3600 * 24))
   return { days: days, hours: hours % 24, minutes: minutes % 60, seconds }
 }

 this.start = function (cb) {
   if (cb) this.updateCb = cb
   clearInterval(this.interval)
   var self = this
   interval = setInterval(function () {
     self.value += 1
     if (self.updateCb) self.updateCb(getTime.bind(self)())
   }, 1000)
 }

 this.stop = function () {
   this.clearInterval(interval)
 }

 this.reset = function () {
   this.value = 0
   clearInterval(interval)
 }
}

var timer = new Timer()

timer.start(function (time) {
 console.log(time)
})

You can start the timer on click of a button or whatever other event.