带有开始和停止按钮的javascript倒计时器

Question

我需要制作一个简单的倒数计时器,从5到0,按钮启动并停止计数器.我唯一不知道的是为什么我的柜台不会停止.

代码如下:

   function clock() {
     var myTimer = setInterval(myClock, 1000);
     var c = 5;

     function myClock() {
       document.getElementById("demo").innerHTML = --c;
       if (c == 0) {
         clearInterval(myTimer);
         alert("Reached zero");
       }
     }
   }

<p id="demo">5</p>
<button onclick="clock()">Start counter</button>
<button onclick="clearInterval(myTimer)">Stop counter</button>

Answer 1

快速而肮脏的答案

   var myTimer;
   function clock() {
     myTimer = setInterval(myClock, 1000);
     var c = 5;

     function myClock() {
       document.getElementById("demo").innerHTML = --c;
       if (c == 0) {
         clearInterval(myTimer);
         alert("Reached zero");
       }
     }
   }

<p id="demo">5</p>
<button onclick="clock()">Start counter</button>
<button onclick="clearInterval(myTimer)">Stop counter</button>

timer在您的函数中（因为它声明为，var, 在您的函数内）只能在您的函数内访问。将var声明移到函数外使其成为全局性的。

更好的解决方案

但是将事情放在全局范围内是（主要）一个坏主意。所以......有一个更好的方法：

   
var myTimerObj = (function(document){
   
   var myTimer;

   function start() {
     myTimer = setInterval(myClock, 1000);
     var c = 5;

     function myClock() {
       document.getElementById("demo").innerHTML = --c;
       if (c == 0) {
         clearInterval(myTimer);
         alert("Reached zero");
       }
     }
   }
   
   function end() {
       clearInterval(myTimer)
   }

   return {start:start, end:end};
 })(document);

<p id="demo">5</p>
<button onclick="myTimerObj.start()">Start counter</button>
<button onclick="myTimerObj.end()">Stop counter</button>

更好的解决方案是利用揭示模块模式并将其保存timer在私有范围内，Tl;Dr它停止timer污染全局范围。

Answer 2

在这里,你只需要做到myTimer全球化.我还修复了一个故障,重置计时器后,它不会显示5.

var myTimer;
   function clock() {
     myTimer = setInterval(myClock, 1000);
     var c = 5;

     function myClock() {
       document.getElementById("demo").innerHTML = --c;
       if (c == 0) {
         clearInterval(myTimer);
         alert("Reached zero");
       }
     }
   }

<p id="demo">5</p>
<button onclick="clock(); document.getElementById('demo').innerHTML='5';">Start counter</button>
<button onclick="clearInterval(myTimer);">Stop counter</button>