Как я могу получить секунды, чтобы сбросить до 0, когда они достигают 60

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

Просто добавьте модуль 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>

Answer 2

Вы можете использовать этот код

<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>