【问题标题】:How can i get the seconds to reset to 0 when they reach 60当它们达到 60 时,我怎样才能将秒数重置为 0
【发布时间】:2019-06-05 17:06:39
【问题描述】:

您好,我的网站中嵌入了秒表,但是我遇到了问题。当秒数达到 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>

非常感谢任何帮助

【问题讨论】:

标签: javascript timer settimeout


【解决方案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>

【讨论】:

    【解决方案2】:

    只需在第 36 行加上 60 的模数,即可将秒数正确重置为 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>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2022-12-15
      • 1970-01-01
      • 2011-10-06
      • 2019-08-18
      • 2014-08-08
      • 2016-03-29
      • 1970-01-01
      相关资源
      最近更新 更多