Question

我的查询非常简单。我能够制作一个倒计时脚本，所以当点击一个按钮时，倒计时开始;但是，如果我们继续点击按钮，它只会添加另一个倒计时并且还会混淆原始的倒计时。我试图清除间隔，但不确定什么不能使它运行。当我按下开始时，倒计时开始，但如果你再次点击它，你可以自己尝试。我也无法弄清楚停止按钮如何结束间隔计时器，我已经尝试过cleartInterval（）;同样。

＆＃13;

$("#startClock").click( function(){
     var counter = document.getElementById('minutes').value;
   setInterval(function() {
     counter--;
      if (counter >= 0) {
         span = document.getElementById("count");
         span.innerHTML = counter;
      }
      if (counter === 0) {
        span = document.getElementById("count");
         span.innerHTML = "";
       }
     },  1000);


});

＆＃13;

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>
Minutes
<select id="minutes">
  <option value="60">1</option>
  <option value="120">2</option>
  <option value="180">3</option>
  <option value="240">4</option>
  <option value="300">5</option>
  </select>
<button id=startClock >Start</button>
<button id=stopClock >Stop</button> <br/> 
<div id="count"></div>

＆＃13;

Answer 1

试试这个：

var clickTimer;

$("#startClock").click( function(){
     if (clickTimer) {
        clearInterval(clickTimer);
     }
     var counter = document.getElementById('minutes').value;
     clickTimer = setInterval(function() {
     counter--;
      if (counter >= 0) {
         span = document.getElementById("count");
         span.innerHTML = counter;
      }
      if (counter === 0) {
        span = document.getElementById("count");
         span.innerHTML = "";
       }
     },  1000);


});

修改

$("#stopClock").click( function(){
 if (clickTimer) {
    clearInterval(clickTimer);
    clickTimer = undefined;
 }
});

再次按下按钮时开始新的间隔

1 个答案: