当计时器中的数字小于 10 时，数字开头的 0 将重复

When a number less than 10 is in the chronometer, the 0 at the start of the number is repeated

本文关键字：数字 开头 计时器 小于      更新时间：2023-09-26

我在做一个计时器，我希望当计时表中出现的数字小于10时，而不是1,2,3...，将出现在计时器01,02,03中... 

function startchrono() {
  var     start         =     document.getElementById('start'),
          reset         =     document.getElementById('reset'),
          counter       =     document.getElementById('counter'),
          sCounter      =     0,
          mCounter      =     0,
          hCounter      =     0;
  setInterval(function () {
    sCounter++;
    if (sCounter == 60) {
      mCounter++;
      sCounter = 0;
    }
    if (sCounter < 10) {
      sCounter = "0" + sCounter;
    }
    if (mCounter < 10) {
      mCounter = "0" + mCounter;
    }
    if (hCounter < 10) {
      hCounter = "0" + hCounter;
    }
    counter.value = hCounter + " " + mCounter + " " + sCounter;
  }, 1000);
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Everything - everything you'll want is here.</title>
  </head>
  <body>
        <script src="js/chronometer.js" charset="utf-8"></script>
    <div class="w3-row w3-container">
      <div class="w3-col m3 w3-text-red">
        <p>     </p>
      </div>
      <div class="w3-col m6 w3-center w3-text-white w3-xxlarge">
        <p>
          <i>Everything you'll want is here.</i>
        </p>
      </div>
      <div class="w3-col m3 w3-text-red">
        <p>              </p>
      </div>
    </div>
    <div class="w3-container w3-row">
      <div class="w3-col m3 w3-text-red">
        <p>     </p>
      </div>
      <div class="w3-col m6 w3-center w3-xlarge w3-white w3-text-grey">
        <p>
          Chronometer
        </p>
      </div>
      <div class="w3-col m3 w3-text-red">
        <p>              </p>
      </div>
    </div>
    <div class="w3-container w3-row">
      <div class="w3-col m3 w3-text-red">
        <p>     </p>
      </div>
      <div class="w3-col m6 w3-center w3-white w3-text-grey">
        <input id="counter" type="text" name="name" value="00:00:00" readonly="readonly" class="w3-text-grey w3-center">
        <br>
        <p>                     </p>
        <input id="start" type="button" name="name" value="Start!" class="w3-btn w3-green" onclick="startchrono()">
        <input id="reset" type="button" name="name" value="Reset!" class="w3-btn w3-blue" onclick="reset();">
        <p>                                           </p>
      </div>
      <div class="w3-col m3 w3-text-red">
        <p>              </p>
      </div>
    </div>
  </body>
</html>

您将每次迭代中的当前计数连接起来，从而将它们转换为字符串。快速的解决方案是在每次迭代开始时将变量"投射"为数字，如下所示：

mCounter = +mCounter;
hCounter = +hCounter;
sCounter = +sCounter;

请参阅 https://jsbin.com/tulipotafa/1/edit?html,js,output 或：

function startchrono() {
  var     start         =     document.getElementById('start'),
          reset         =     document.getElementById('reset'),
          counter       =     document.getElementById('counter'),
          sCounter      =     0,
          mCounter      =     0,
          hCounter      =     0;
  setInterval(function () {
    mCounter = +mCounter;
    hCounter = +hCounter;
    sCounter = +sCounter;
    sCounter++;
    if (sCounter == 60) {
      mCounter++;
      sCounter = 0;
    }
    if (sCounter < 10) {
      sCounter = "0" + sCounter;
    }
    if (mCounter < 10) {
      mCounter = "0" + mCounter;
    }
    if (hCounter < 10) {
      hCounter = "0" + hCounter;
    }
    counter.value = hCounter + " " + mCounter + " " + sCounter;
  }, 1000);
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Everything - everything you'll want is here.</title>
  </head>
  <body>
        <script src="js/chronometer.js" charset="utf-8"></script>
    <div class="w3-row w3-container">
      <div class="w3-col m3 w3-text-red">
        <p>     </p>
      </div>
      <div class="w3-col m6 w3-center w3-text-white w3-xxlarge">
        <p>
          <i>Everything you'll want is here.</i>
        </p>
      </div>
      <div class="w3-col m3 w3-text-red">
        <p>              </p>
      </div>
    </div>
    <div class="w3-container w3-row">
      <div class="w3-col m3 w3-text-red">
        <p>     </p>
      </div>
      <div class="w3-col m6 w3-center w3-xlarge w3-white w3-text-grey">
        <p>
          Chronometer
        </p>
      </div>
      <div class="w3-col m3 w3-text-red">
        <p>              </p>
      </div>
    </div>
    <div class="w3-container w3-row">
      <div class="w3-col m3 w3-text-red">
        <p>     </p>
      </div>
      <div class="w3-col m6 w3-center w3-white w3-text-grey">
        <input id="counter" type="text" name="name" value="00:00:00" readonly="readonly" class="w3-text-grey w3-center">
        <br>
        <p>                     </p>
        <input id="start" type="button" name="name" value="Start!" class="w3-btn w3-green" onclick="startchrono()">
        <input id="reset" type="button" name="name" value="Reset!" class="w3-btn w3-blue" onclick="reset();">
        <p>                                           </p>
      </div>
      <div class="w3-col m3 w3-text-red">
        <p>              </p>
      </div>
    </div>
  </body>
</html>

以这种方式使用 setInterval 会导致时钟发生相当大的漂移。

相反，您可以计算两个日期之间的差异。当您启动时钟时创建一个日期实例，并在每一步计算时差，然后根据自己的喜好对其进行格式化。假设now和then是日期对象，它将如下所示：

var diff = new Date(now - then);
var timeString = diff.toISOString().substr(11,8)
相关文章：