如何在秒數達到60時將秒數重置為0

Question

您好我在我的網站上嵌入了一個秒表，但是我遇到了問題。 當秒數達到60因此1分鍾時，它們應該重置為00.但是在這種情況下，當分鍾將每60秒增加時，秒數將不會重置為零。 這是我的代碼

<div id="output">00:00:00</div>

<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button>

<script type="text/javascript">
  var time = 0;
  var running = 0;

  function startPause() {
    if (running == 0) {
      running = 1;
      increment();
      document.getElementById('startPause').innerHTML = 'Pause';
    } else {
      running = 0;
      document.getElementById('startPause').innerHTML = 'Resume';
    }
  }

  function reset() {
    running = 0;
    time = 0;
    document.getElementById('output').innerHTML = '00:00:00';
    document.getElementById('startPause').innerHTML = 'Start';
  }

  function increment() {
    if (running == 1) {
      setTimeout(function() {
        time++;
        var mins = Math.floor(time / 10 / 60);
        if (mins <= 9) {
          mins = '0' + mins;
        }
        var secs = Math.floor(time / 10);
        if (secs <= 9) {
          secs = '0' + secs;
        }
        var tenths = Math.floor(time % 10);
        if (tenths <= 9) {
          tenths = '0' + tenths;
        }
        document.getElementById('output').innerHTML =
          mins + ':' + secs + ':' + tenths;
        increment();
      }, 100);
    }
  }
</script>

任何幫助非常感謝

Answer 1

您可以使用該代碼

 <div id="output">00:00:00</div> <button id="startPause" onclick="startPause()">Start</button> <button onclick="reset()">Reset</button> <script type="text/javascript"> var time = 0; var running = 0; function startPause() { if (running == 0) { running = 1; increment(); document.getElementById('startPause').innerHTML = 'Pause'; } else { running = 0; document.getElementById('startPause').innerHTML = 'Resume'; } } function reset() { running = 0; time = 0; document.getElementById('output').innerHTML = '00:00:00'; document.getElementById('startPause').innerHTML = 'Start'; } function increment() { if (running == 1) { setTimeout(function() { time++; var mins = Math.floor(time / 10 / 60); if (mins <= 9) { mins = '0' + mins; } var secs = Math.floor(time / 10); if(secs >= 60) { secs = secs - ( mins * 60 ); } if ((secs).toString().length === 1) { secs = '0' + secs; } var tenths = Math.floor(time % 10); if ((tenths).toString().length === 1) { tenths = '0' + tenths; } document.getElementById('output').innerHTML = mins + ':' + secs + ':' + tenths; increment(); }, 100); } } </script> 

Answer 2

只需將60的模數加到第36行，就可以將秒數正確地重置為0（注釋要突出顯示的行）：

<div id="output">00:00:00</div>

<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button>

<script type="text/javascript">
  var time = 0;
  var running = 0;

  function startPause() {
    if (running == 0) {
      running = 1;
      increment();
      document.getElementById('startPause').innerHTML = 'Pause';
    } else {
      running = 0;
      document.getElementById('startPause').innerHTML = 'Resume';
    }
  }

  function reset() {
    running = 0;
    time = 0;
    document.getElementById('output').innerHTML = '00:00:00';
    document.getElementById('startPause').innerHTML = 'Start';
  }

  function increment() {
    if (running == 1) {
      setTimeout(function() {
        time++;
        var mins = Math.floor(time / 10 / 60);
        if (mins <= 9) {
          mins = '0' + mins;
        }
        var secs = Math.floor(time / 10) % 60; // <-- see here for change
        if (secs <= 9) {
          secs = '0' + secs;
        }
        var tenths = Math.floor(time % 10);
        if (tenths <= 9) {
          tenths = '0' + tenths;
        }
        document.getElementById('output').innerHTML =
          mins + ':' + secs + ':' + tenths;
        increment();
      }, 100);
    }
  }
</script>