Javascript 我需要倒计时器慢慢倒计时_Javascript_Countdown

Javascript 我需要倒计时器慢慢倒计时

javascript

Javascript 我需要倒计时器慢慢倒计时,javascript,countdown,Javascript,Countdown,我想建立一个从10到0的倒计时。然而，我现在的代码运行得太快了 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body&g

我想建立一个从10到0的倒计时。然而，我现在的代码运行得太快了

 <!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--;

    }



 }

目标：我想直观地显示倒计时。例如，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--;

    }



 }


10
开始倒计时
10
函数计时器（）{
i=10
var num=[0,1,2,3,4,5,6,7,8,9,10,11]；
var time=document.getElementsByClassName（“时间”）；
而（i！=0）{
//时间-=i；
时间[0]。innerHTML=num[i]；
我--；
}
}

可能是，也可能是：p

var num=[0,1,2,3,4,5,6,7,8,9,10,11]；
功能定时器（一）{
var i=i | | num.length-1；
setTimeout（函数（）{
var time=document.getElementsByClassName（“时间”）；
时间[（num.length-i）]。innerHTML=num[i]；
我--；
计时器（i）；
}, 500);
}
计时器（0）

您的代码循环浏览数字，并在不停顿的情况下更新页面。这可能只是意味着数字闪现的速度非常快，但实际上比这更糟。浏览器通常会运行javascript，直到它完成，然后才重新呈现页面，直到下一个事件触发更多javascript运行。这意味着您只能看到页面的最终状态

在您的情况下，您需要确保每次更改数字时，浏览器至少会重新渲染

setInterval

将是一种方法——每次调用回调都会更新页面，然后完成

在这种情况下，我认为使用

setTimeout

是一个更简单的解决方案。您可以编写一个以数字作为参数的函数。然后，您可以更新页面以显示该数字，并使用

setTimeout

在一个小于传入数字的延迟后调用相同的函数：

函数勾号（num）{
//将页面上的数字设置为num
var time=document.getElementsByClassName（“时间”）；
时间[0]。innerHTML=num；
//如果我们达到0，我们就完成了
如果（num==0）返回；
//否则，在1000ms中，再次调用此函数，num为少一个
设置超时（（）=>tick（num-1），1000）；
}


10
开始倒计时
10

感谢迈瑟的详细解释和提供代码。我肯定不知道重新渲染的事情。另外，谢谢你让它变得简单。