第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

我需要倒數(shù)計(jì)時(shí)器來慢慢倒數(shù)

我需要倒數(shù)計(jì)時(shí)器來慢慢倒數(shù)

阿晨1998 2023-03-24 15:32:19
我想構(gòu)建一個(gè)從 10 到 0 的倒數(shù)計(jì)時(shí)器。但是,我現(xiàn)在的代碼速度太快了。目標(biāo):我想直觀地顯示倒計(jì)時(shí)。例如,10、9、8、7、6 等。目前,計(jì)時(shí)器從 10 變?yōu)?1。我是 Javascript 的新手,所以如果能提供簡單的解決方案,我將不勝感激。我試過 setTimeInterval() 但我沒有得到任何地方。我檢查過類似的解決方案,但答案超出了我的理解范圍。在調(diào)試器模式下,倒計(jì)時(shí)確實(shí)從 10 緩慢倒數(shù)到 1。在它之外,功能運(yùn)行得太快了。 <!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貢獻(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>


查看完整回答
反對 回復(fù) 2023-03-24
?
青春有我

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>


查看完整回答
反對 回復(fù) 2023-03-24
  • 2 回答
  • 0 關(guān)注
  • 154 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)