数字只计数一次，而不是无限次答案

【问题标题】：The numbers count only once, instead of infinitely数字只计数一次，而不是无限次
【发布时间】：2020-04-28 19:53:01
【问题描述】：

我正在创建一个间隔计时器。我希望在输入数字并按下按钮后将数字倒数到 0，如果它已经倒数到 0，则该功能从头开始。在我的代码中 fukncja 倒数到 0，但是下一个倒数不会以 0 结束，而是倒数到负数。为什么它不起作用？你能帮忙吗？

var workI = 0;
var countDownI = 0;
document.getElementById('btn').addEventListener('click',function(){
  var workValue = Math.ceil(document.getElementById('work-seconds').value);
  if(!workI)clearInterval(workI);
  function countDown(){
    var workSec = new Date().getTime() + workValue * 1000;
    countWorkSec();
    workI = setInterval(countWorkSec,1000);
    function countWorkSec(){
      var countSec = Math.ceil((workSec - new Date().getTime()) / 1000);
      countSec < 10 ? document.getElementById('workSecs').textContent = "0" + countSec : document.getElementById('workSecs').textContent = countSec;
      if(countSec == 0){
        clearInterval(workI);
        workI = 0;
      }
    };
  }
  countDown();
  countDownI = setInterval(countDown,workValue * 1000);
});

<p>Work</p>
<input type="number" id="work-seconds" placeholder="seconds" min="0">
<br>
<br>
<button id="btn">START</button>
<p>Work Timer : <span id="workSecs"></span></p>

【问题讨论】：

标签： javascript html timer

【解决方案1】：

var workI = 0;
var countDownI = 0;
document.getElementById('btn').addEventListener('click',function(){
  var workValue = Math.ceil(document.getElementById('work-seconds').value);
  function countDown(){
    if(workI)clearInterval(workI); // Change - Clearinterval when countDown starts
    var workSec = new Date().getTime() + workValue * 1000;
    countWorkSec();
    workI = setInterval(countWorkSec,1000);
    function countWorkSec(){
      var countSec = Math.ceil((workSec - new Date().getTime()) / 1000);
      countSec < 10 ? document.getElementById('workSecs').textContent = "0" + countSec : document.getElementById('workSecs').textContent = countSec;
      if(countSec == 0){
        clearInterval(workI);
        workI = 0;
      }
    };
  }
  countDown();
  countDownI = setInterval(countDown, (workValue + 1) * 1000);
});

【讨论】：