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变量来检查它是否正在运行。

Stack snippet

＆＃13;

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;

＆＃13;

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

＆＃13;

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

＆＃13;

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

使用闭包可以执行类似这样的操作，其中只有函数名称是公共的。

Stack snippet

＆＃13;

(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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

2 个答案: