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

编程问答 2022-06-12

问题描述

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

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

当前，计时器从10变为1。我是Java语言的新手，所以如果给出简单的解决方案，我将不胜感激。我已经尝试过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--;

    }



 }

解决方法

您的代码循环显示数字并更新页面而没有任何暂停。潜在地，这仅意味着数字会快速闪烁，但实际上比这更糟。浏览器通常会运行javascript，直到完成为止，然后在下一个事件触发更多javascript运行之前，重新渲染页面。这意味着您只会看到页面的最终状态。

对于您的情况，您需要确保每次更改数字时至少让浏览器重新渲染。 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>

,

也许是：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>

,

您可以像这样使用setInterval 

let from = 10 // start counter number
let to = 1 // End point
let interval = 500 // time in milleseconds

let timer = setInterval(function(){
  console.log(from--)
  if(from < to) clearInterval(timer) 
},interval)

当然，您可以在DOM中打印它，而不是将其打印到控制台中。

您可以在 MDN

中阅读有关official doc的更多信息