使用 html js 在计时器中实现暂停

Question

我正在尝试使用 html 和 js 实现一个计时器。我同样使用 setInterval() 和 clearInterval()。到目前为止，我已经能够启动和停止计时器。 'pause button' 也会暂停计时器，但再次恢复时会使用文本框中提到的时间而不是当前时间值。

我想使用中显示的值就可以完成工作，但我一直无法找到如何让它工作..

下面是我目前正在处理的代码

<html>
  <body>
    <input type="number" id="tb1"></br></br>
    <span id="mins">0 </span>
    <span>:</span>
    <span id="secs">0 </span></br></br>
    <button id="start" onclick="javascript:onStart()">start</button>
    <button id="pause" onclick="javascript:onPause()">pause</button>
    <button id="stop" onclick="javascript:onStop()">stop</button>
  </body>
</html>

.js

var mintb;
var mins;
var secs=0;
var inter;

function onStart(){
  mintb = document.getElementById("tb1").value;
  mins=parseInt(mintb);
  document.getElementById("mins").innerHTML = mins;
  inter = setInterval(timer,1000);
}

function onPause(){
  clearInterval(inter);
  console.log(mins);
  console.log(secs);
  
}

function onStop(){
  clearInterval(inter);
   mins=0;
   secs=0;
   document.getElementById("mins").innerHTML = mins;
   document.getElementById("secs").innerHTML = secs;
   
}

function timer(){
    document.getElementById("mins").innerHTML = mins;
    document.getElementById("secs").innerHTML = secs;
    secs = secs-1;
    if(secs<0){
    secs=59;
    mins=mins-1;
    console.log(mins);
    }
  
    if(mins<0){
      clearInterval(inter);
      document.getElementById("mins").innerHTML = 00;
      document.getElementById("secs").innerHTML = 00;
    }
}

编辑：tmins在最后一个if写错了，实际上是mins

Answer 1

clearInterval 清除间隔并将计时器重置为 0。

如果你想实现播放和暂停功能，你可以参考这个 - https://gist.github.com/ncou/3a0a1f89c8e22416d0d607f621a948a9

Answer 2

您的代码是正确的

html 

<button id="resume" onclick="javascript:onResume()">Resume</button>

Js 

function onResume(){
     inter = setInterval(timer , 1000);
}

不更改标记

function onPause() {
  clearInterval(inter);
  let button = document.querySelector('#pause')
  button.innerText = "Resume";
  button.setAttribute('onclick', 'onResume()');
}
function onResume() {
  let button = document.querySelector('#pause')
  button.innerText = "Pause";
  button.setAttribute('onclick', 'onPause()');
  inter = setInterval(timer, 1000);
}

使用 html js 在计时器中实现暂停

Implementing pause in timer using html js

javascript

setinterval