如何将我的秒表代码重构为 Vanilla JavaScript？

Question

everyone. I have a small code written in Vue.JS for the stopwatch, After writing I realized that there are small losses in time (For every 30 real seconds, the browser marks about 27-28 seconds). as well as when folding deposits the time account stops, Tell me, please, how to my code? I can insert the use of localStorage to avoid wasting time when coagulating and where better to compare with the real time to avoid the usual losses?

Stopwatch code:

<template>
  <div id="clock">
    <span class="time" ref="watch">00:00</span>
  </div>
</template>

<script>
export default {
  name: "MyTimer",
  data() {
    return {
      minutes: 0,
      seconds: 0,
      miliseconds: 0,
      interval: null,
    }
  },
  mounted() {
    const watch = this.$refs.watch;
    clearInterval(this.interval);
    this.interval = setInterval(() => {
      this.miliseconds += 10;
      let dateTimer = new Date(this.miliseconds);
      watch.innerHTML = ('0' + dateTimer.getUTCMinutes()).slice(-2) + ':' + ('0' + dateTimer.getUTCSeconds()).slice(-2);
    }, 10)
  }
}
</script>

<style scoped>

#clock {
  background: #EDEDED;
  padding: 1%;
  border-radius: 12px;
  text-align: center;
}

.time {
  font-weight: 900;
  font-size: 2.125em;
  letter-spacing: 0.015625em;
  color: #373745;
}
</style>

Please help embed localStorage and real past tense comparison to make the stopwatch more accurate and avoid real past tense losses.

Answer 1

I think I got all things covered here. The save and load isn't used in the example due to localStorage not working within sandbox.

 class stopwatch { /** @param {HTMLElement} element */ constructor(element) { this._el = element; if(this._el) { this._el.innerText = "00:00"; } } laps = []; totalMilliseconds = 0; totalSeconds = this.totalMilliseconds / 1000.0; totalMinutes = this.totalMilliseconds / 60000.0; totalHours = this.totalMilliseconds / 3600000.0; _startTime = 0; _interval = null; start = (reset) => { if(reset) { this.laps.splice(0, this.laps.length); } this._startTime = performance.now(); this._interval = setInterval(this._render, 10); }; lap = () => { this.laps.push(performance.now() - this._startTime); this._startTime = performance.now(); }; stop = () => { this.laps.push(performance.now() - this._startTime); this._startTime = 0; clearInterval(this._interval); this._interval = null; }; save = () => { if(this._interval) { this.stop(); } localStorage.setItem('js_stopwatch', JSON.stringify({laps: this.laps})); }; load = () => { const data = JSON.parse(localStorage.getItem('js_stopwatch')); if(data && data.laps) { this.laps = data.laps; this._startTime = performance.now(); this._render(); this.start(); return true; } }; _msToParts = (milliseconds) => { const h = Math.floor(milliseconds / (1000 * 60 * 60)); milliseconds -= (h * 60 * 60 * 1000); const m = Math.floor(milliseconds / (1000 * 60)); milliseconds -= (m * 60 * 1000); const s = Math.floor(milliseconds / (1000)); milliseconds -= (s * 1000); const ms = Math.floor(milliseconds); return { hours: h, minutes: m, seconds: s, milliseconds: ms, }; }; _render = () => { this.totalMilliseconds = this.laps.reduce((pv, cv, i) => pv + cv, (performance.now() - this._startTime)); const parts = this._msToParts(this.totalMilliseconds); if(this._el) { this._el.innerText = `${parts.hours? `${parts.hours}:`: ''}${parts.minutes.toString().padStart(2, '0')}:${parts.seconds.toString().padStart(2, '0')}`; } }; } const el = document.getElementById("clock"); const sw = new stopwatch(el); sw.start();

 #clock { background: #EDEDED; padding: 1%; border-radius: 12px; text-align: center; }.time { font-weight: 900; font-size: 2.125em; letter-spacing: 0.015625em; color: #373745; }

 <span id="clock">00:00</span>