首页猿问我需要倒数计时器来慢慢倒数

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

JavaScript

阿晨1998 2023-03-24 15:32:19

我想构建一个从 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 = 10var 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--; } }

查看完整描述

2 回答

摇曳的蔷薇

TA贡献1793条经验获得超6个赞

您的代码循环遍历数字并毫无停顿地更新页面。这可能只是意味着数字闪烁得非常快，但实际上比这更糟。浏览器通常运行 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);

}

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

</div>

反对回复 2023-03-24

青春有我

TA贡献1784条经验获得超8个赞

可能是：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>

反对回复 2023-03-24

2 回答
0 关注
101 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

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

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

2 回答

添加回答