2 回答

TA貢獻(xiàn)1793條經(jīng)驗(yàn) 獲得超6個(gè)贊
您的代碼循環(huán)遍歷數(shù)字并毫無停頓地更新頁面。這可能只是意味著數(shù)字閃爍得非???,但實(shí)際上比這更糟。瀏覽器通常運(yùn)行 javascript 直到它完成,然后才重新呈現(xiàn)頁面,然后下一個(gè)事件觸發(fā)更多 javascript 運(yùn)行。這意味著您只會(huì)看到頁面的最終狀態(tài)。
在您的情況下,您需要確保每次更改數(shù)字時(shí)至少讓瀏覽器重新呈現(xiàn)。setInterval將是一種方法 - 每次調(diào)用回調(diào)都會(huì)更新頁面然后完成。
在這種情況下,我認(rèn)為使用setTimeout是一種更簡單的解決方案。您可以編寫一個(gè)將數(shù)字作為參數(shù)的函數(shù)。然后您可以更新頁面以顯示該數(shù)字,并setTimeout在延遲后調(diào)用相同的函數(shù),延遲比傳入的數(shù)字少一個(gè):
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>

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超8個(gè)贊
可能是: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>
添加回答
舉報(bào)