當有一位數時，秒表不會加零

Question

我想讓時間顯示那個時間01: 02: 03:43 ，但我得到0:0:00000000000000001:15我累了在 dev **0:0:0:0 中添加 0，但它不起作用. 這是計時器的好代碼嗎？

var hour = 0;
var min = 0;
var sec = 0;
var miliSec = 0;
var timer;

function callTimer() {
  miliSec++;
  if (miliSec < 100) {
    if (miliSec === 99) {
      miliSec = 0;
      sec++;
      if (sec === 60) {
        sec = 0;
        min++;
        if (min === 60) {
          min = 0;
          hour++
        }
      }
    }
  } else {
    miliSec = 0;
  }

  document.getElementById("#timer").innerHTML = hour + ":" + min + ":" + sec + ":" + miliSec;
}


function start() {
  document.getElementById("#start").disabled = true;
  timer = setInterval(callTimer, 10);
}

function stop() {
  document.getElementById("#start").disabled = false;
  clearInterval(timer);
}

function reset() {
  stop();
  hour = 0;
  min = 0;
  sec = 0;
  miliSec = 0;
  document.getElementById("#timer").innerHTML = hour + ":" + min + ":" + sec + ":" + miliSec;
}

我必須提供有關此問題的更多詳細信息，因為驗證不允許將問題發布給我。 好吧，我寫了這個;)

Answer 1

無需保留四個計數器，您可以非常輕松地在每次運行callTimer回調時獲得以毫秒為單位的增量，然后進行一些簡單的計算以獲得秒、小時、周……無論您需要什么時間單位。 沿着這些路線的東西應該可以解決問題：

var startTS

function formatNumber(num, digits) {
  return `000${num}`.slice(-digits)  // Get last X digits (in our case will be either 2 or 3)
}

function callTimer() {
  const currentTS = Date.now()
  const elapsed = currentTS - startTS   // Elapsed time in milliseconds
  const elapsedSec = Math.floor(elapsed/1000)   // Whole seconds
  const elapsedMin = Math.floor(elapsedSec/60)  // Whole minutes
  const elapsedHr  = Math.floor(elapsedMin/60)  // Whole hours

  ...

  const msec = elapsed % 1000  // Get the "milliseconds" part
  const sec = elapsedSec % 60  // Seconds part
  const min = elapsedMin % 60  // Minutes
  const hr = elapsedHr % 60    // Hours

  const fmtStr = `${formatHumber(hr,2)}:${formatNumber(min,2)}:${formatNumber(sec,2)}.${formatNumber(msec,3)}`
  document.getElementById("#timer").innerHTML = fmtStr
}

...

function start() {
  document.getElementById("#start").disabled = true;
  startTS = Date.now()
  timer = setInterval(callTimer, 10);
}

...

希望有幫助！

Answer 2

我將toString().padStart(2, "0")到每個元素。

您可以在此處閱讀有關padStart()更多信息： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

 var hour = 0; var min = 0; var sec = 0; var miliSec = 0; var timer; function callTimer() { miliSec++; if (miliSec < 100) { if (miliSec === 99) { miliSec = 0; sec++; if (sec === 60) { sec = 0; min++; if (min === 60) { min = 0; hour++ } } } } else { miliSec = 0; } /* Add 0 every time -- This does not work because it changes the type from a number to string, causing the unexpected behavior if (sec < 10) { sec = "0" + sec; }else{ sec; } */ document.getElementById("#timer").innerHTML = hour.toString().padStart(2, "0") + ":" + min.toString().padStart(2, "0") + ":" + sec.toString().padStart(2, "0") + ":" + miliSec; } function start() { document.getElementById("#start").disabled = true; clearInterval(timer);//stop any previous interval before starting another timer = setInterval(callTimer, 10); } function stop() { document.getElementById("#start").disabled = false; clearInterval(timer); } function reset() { stop(); hour = 0; min = 0; sec = 0; miliSec = 0; document.getElementById("#timer").innerHTML = hour.toString().padStart(2, "0") + ":" + min.toString().padStart(2, "0") + ":" + sec.toString().padStart(2, "0") + ":" + miliSec; }

 <nav class="controls"> <a href="#" class="button" id="#start" onclick="start();">START</a> <a href="#" class="button" id="#stop" onclick="stop();">STOP</a> <a href="#" class="button" id="#clear" onclick="reset();">CLEAR</a> </nav> <div id="#timer">00:00:00:0</div>