Question

我一直在为一个学校项目编写代码，而我对JavaScript还是很陌生。我已经为计时器编写了代码，该计时器在40秒内从40递减为0。在那之后，我想要另一个计时器，但是在第一次停止的地方以不同的文本开头。

但是我不知道该怎么做。我听说过setInterval，但是我不知道如何应用它。

我的代码：

<script type="text/javascript">
  function countDown(secs, elem) {
    var element = document.getElementById(elem);
    element.innerHTML = "Word bereid, nog " + secs + " seconde te gaan";
    if (secs < 1) {
      clearTimeout(timer);
      element.innerHTML = '';
    }
</script>
    secs--;
    var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);
    }
<div id="status">
</div>
<script type="text/javascript">
  countDown(5, "status")
</script>
</div>

Answer 1

countDown(5, "status");

function countDown (secs, elem) {
    var element = document.getElementById(elem);
    var timer = setInterval(() => {
      console.log(secs, 'seconds remaining');
      
      element.innerHTML = "Word bereid, nog " + secs + " seconde te gaan";
      if(secs < 1) {
          clearInterval(timer);
          element.innerHTML = '';
          console.log('timer after timer...');
      }
      secs--;
    }, 1000);
}

<div id="status"></div>

Answer 2

如果您只想倒计时每秒更新一次，则应该使用

var interval = setInterval(function(){ code here }, 1000);

这将每秒调用一次，当您的计时器为零时使用

clearInterval(interval);

这将停止执行您的代码。

Answer 3

let timeout=40;
let incrementTimer=null;
let decrementTimer=null;
let element = document.getElementById("status");
decrementTimer=setInterval(decrement,1000);

function decrement(){
    element.innerHTML = "Word bereid, nog " + timeout + " seconde te gaan";
    timeout--;
    if(timeout==0){
        element.innerHTML="";
        clearTimeout(decrementTimer);
        incrementTimer=setInterval(increment,1000);
    }
}

function increment(){
    element.innerHTML = "Word bereid, nog " + timeout + " seconde te gaan";
    timeout++;
    if(timeout==40){
        element.innerHTML="";
        clearTimeout(incrementTimer);
        decrementTimer=setInterval(decrement,1000);
    }
}

Answer 4

我希望它从40倒数到0，然后再从0倒数到40。

另一个计时器停止后启动计时器

4 个答案: