我需要倒数计时器来慢慢倒数

Question

我想构建一个从 10 到 0 的倒数计时器。但是，我现在的代码速度太快了。

目标：我想直观地显示倒计时。例如10,9,8,7,6等

目前，计时器从 10 变为 1。我是 Javascript 的新手，所以如果能提供简单的解决方案，我将不胜感激。我试过 setTimeInterval() 但我没有得到任何地方。我已经检查过类似的解决方案，但答案超出了我的理解范围。

在调试器模式下，倒计时会从 10 缓慢倒数到 1。在它之外，函数运行得太快了。

 <!DOCTYPE html>
  <html>

 <head>
 <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 </head>
 <body>

<div id ="main-container">
    <div class="countdown"><p class="time">10</p></div>

    <button id="btn" onclick=timer()>Begin Countdown</button>

    <div class="countdown"><p class="time">10</p></div>
</div>



   </body>


   </html>



 function timer(){

i = 10
var num = [0,1,2,3,4,5,6,7,8,9,10,11];
var time = document.getElementsByClassName("time");

    while(i != 0 ){
        

        //time -= i;
        time[0].innerHTML = num[i];

        i--;

    }



 }

Answer 1

可能是:p

var num = [0,1,2,3,4,5,6,7,8,9,10,11];
function timer(i){
  var i = i || num.length - 1; 
  setTimeout(function(){
    var time = document.getElementsByClassName("time");      
    time[(num.length - i)].innerHTML = num[i];
    i--;
    timer(i);
  }, 500);
 }
 
 timer(0)

<div class="countdown">
    <p class="time"><p>
    <p class="time"><p>
    <p class="time"><p>
    <p class="time"><p>
    <p class="time"><p>
    <p class="time"><p>
    <p class="time"><p>    
    <p class="time"><p>    
    <p class="time"><p>    
    <p class="time"><p>        
    <p class="time"><p>        
    <p class="time"><p>            
</div>

Answer 2

您的代码循环遍历数字并毫不停顿地更新页面。这可能只是意味着数字闪烁得非常快，但实际上比这更糟。浏览器通常运行 javascript 直到它完成，然后才 re-render 页面，然后下一个事件触发更多 javascript 到运行。这意味着您只会看到页面的最终状态。

在您的情况下，您需要确保每次更改数字时至少让浏览器 re-render。 setInterval 是一种方法 - 每次调用回调都会更新页面，然后完成。

在这种情况下，我认为使用 setTimeout 是一个更简单的解决方案。您可以编写一个将数字作为参数的函数。然后您可以更新页面以显示该数字，并使用 setTimeout 在延迟后调用相同的函数，延迟比传入的数字少一：

function tick(num) {
  // set the number on the page to num
  var time = document.getElementsByClassName("time");
  time[0].innerHTML = num;

  // if we've reached 0, we're done
  if (num == 0) return;
  
  // otherwise, in 1000ms call this function again with num being one less
  window.setTimeout(() => tick(num-1), 1000);
}

<div id ="main-container">
    <div class="countdown"><p class="time">10</p></div>

    <button id="btn" onclick="tick(10)">Begin Countdown</button>

    <div class="countdown"><p class="time">10</p></div>
</div>

我需要倒数计时器来慢慢倒数

I need countdown timer to countdown slowly

javascript

countdown