首頁猿問我需要倒數計時器來慢慢倒數

我需要倒數計時器來慢慢倒數

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 關注
139 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

我需要倒數計時器來慢慢倒數

我需要倒數計時器來慢慢倒數

2 回答

添加回答