我需要倒数计时器来慢慢倒数
我想构建一个从 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--;
}
}
阿晨19982回答
-
摇曳的蔷薇
您的代码循环遍历数字并毫无停顿地更新页面。这可能只是意味着数字闪烁得非常快，但实际上比这更糟。浏览器通常运行 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> -
青春有我
可能是：pvar 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>
随时随地看视频慕课网APP
相关分类
JavaScript