时间戳

首页 > 解决方案 > 使用html js实现定时器暂停

javascript - 使用html js实现定时器暂停

问题描述

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

我想使用 <span> 中显示的值可以完成工作，但我无法找到如何使它工作..

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

<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 最后如果写错了，实际上是 mins

标签： javascriptsetinterval

解决方案

你的代码是正确的

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);
}

推荐阅读