javascript - 当有一位数时，秒表不加零

Question

我想让时间显示那个时间 01: 02: 03:43，但我得到 0:0:00000000000000001:15 我厌倦了添加 0 dev **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

我向每个元素添加了 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>