在 RUN 和 RESET JS 之间切换计时器

Question

我想做一个简单的计时器，它可以从 25 运行到 0 并随时重置。

为此，我制作了一个可点击的 div，我希望单击一次启动计时器，再单击一次将其重置为 25 并停止计时器，这可能吗？ 可切换的启动/重置计时器？

这是我迄今为止想出的：

HTML

<div id="result" onclick="playReset"><p id="output"></p> </div>

CSS

#result {
  background: pink;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  margin-left: 400px;
  margin-top: 200px;
}
#result:hover {
 border: black solid;

}
#output{
  margin-left: 70px;
position: fixed;
  font-size: 60px;
}

还有最重要的 JS：

var duree=25;
var toggle = true;
function playReset () {


if(toggle == true) {
 var time = setInterval(function(){ 
  duree--;

document.getElementById('output').innerHTML = duree;                   
                      }, 1000);

  toggle = false
}
else if (toggle == false) {
  clearInterval(time);
  duree = 25;
  toggle = true;
}

}
document.getElementById('output').innerHTML = duree;

谢谢，如果有人能帮我一把，我很难理解 setInterval/timeout、clearInterval/timeout ...

Answer 1

我稍微简化了代码，您可以在其中使用实际的time 变量来检查它是否正在运行。

堆栈sn-p

var duree = 2;
var time;
function playReset() {
  if (time) {
    clearInterval(time);
    time = null;
    duree = 25;
    document.getElementById('output').innerHTML = duree;
  } else {
    time = setInterval(function() {
      duree--;
      document.getElementById('output').innerHTML = duree;
      if (duree == 0) {
        clearInterval(time);
      }
    }, 1000);
  }
}
document.getElementById('output').innerHTML = duree;

#result {
  background: pink;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  margin-left: 40px;
  margin-top: 20px;
  border: transparent solid;
}

#result:hover {
  border: black solid;
}

#output {
  margin-left: 70px;
  position: fixed;
  font-size: 60px;
}

<div id="result" onclick="playReset();">
  <p id="output"></p>
</div>

---

当您以后提高技能时，您可能希望将这些东西及其变量隐藏在全局环境中。

使用闭包可以做这样的事情，只有函数名是公开的。

堆栈sn-p

(function (output,duree,time) {  //declared as static variables
  this.init_time = duree;
  this.playReset = function() { 
    if (time) {
      clearInterval(time);
      time = null;
      output.innerHTML = duree = init_time; // set init value
    } else {
      time = setInterval(function() {
        output.innerHTML = --duree;
        if (duree == 0) {
          clearInterval(time);
        }
      }, 1000);
    }
  }  
  window.playReset = this.playReset; //make it public
  output.innerHTML = duree; // set init value
  
})(document.getElementById('output'),25);  // pass in the output element and default time

#result {
  background: pink;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  margin-left: 40px;
  margin-top: 20px;
  border: transparent solid;
}

#result:hover {
  border: black solid;
}

#output {
  margin-left: 70px;
  position: fixed;
  font-size: 60px;
}

<div id="result" onclick="playReset();">
  <p id="output"></p>
</div>

Answer 2

这是相同的解决方案，但使用事件侦听器和我检查计数以了解是否要进行重置。你可以在这里试试：

https://jsfiddle.net/0bej5tyn/

html

<div id="timer">
  25
</div>

css

#timer{
  width:150px;
  height:100px;
  line-height:100px;
  border-radius:100px;
  border:5px solid #444;
  background:#555;
  font-size:50px;
  text-align:center;
  color:#fff;
  font-family:arial;
}

#timer:hover{
  border:5px solid #333;
}

js

var timerButton = document.getElementById("timer");
var countStart = timerButton.innerHTML
var count = countStart;
var timer;

timerButton.addEventListener('click',function(){
    if (count == countStart){
    timer = setInterval(function(){
      count--;
      timerButton.innerHTML = count;
      if (count == 0){
        clearInterval(timer);
      }
    },1000);
  }
    else{
      /* Reset here */
      clearInterval(timer);
      count = countStart;
      timerButton.innerHTML = count;
    }
});