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

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

使用函數(shù)慢慢增加背景顏色的數(shù)量

使用函數(shù)慢慢增加背景顏色的數(shù)量

GCT1015 2022-05-26 17:08:03
我正在嘗試使用以下代碼慢慢增加背景的顏色：<script type="text/javascript">        let container = document.querySelector(".container")        for(let i = 0 ; i<50; i++) {            setTimeout(function() {                container.style.background = `rgb(${i} , ${i}, ${i})`},                1000);            }</script>我不確定為什么它不起作用。當(dāng)我使用 console.log(i) 時(shí)，它似乎沒有正確迭代。我希望它在每次迭代時(shí)暫停。我該怎么做呢？
查看完整描述

2 回答

?
慕森王

TA貢獻(xiàn)1777條經(jīng)驗(yàn) 獲得超3個(gè)贊

您可以通過乘以延遲來解決此問題，例如i：setTimeout


for (let i = 0; i < 50; i++) {

   setTimeout(function() {

      container.style.background = `rgb(${i} , ${i}, ${i})`

   }, 1000 * i);  // <----- like this

}

演示：

let container = document.querySelector(".container")

for (let i = 0; i < 255; i++) {

  setTimeout(function() {

    //var randomColor = Math.floor(Math.random() * 12777215).toString(16);


    container.style.background = `rgb(${i} , ${i}, ${i})`

    

  }, 1000 * i);

}

<div class="container" style="width:100px;height:100px"></div>

演示（從黑色到白色）：


let container = document.querySelector(".container")

let container2 = document.querySelector(".container2")

for (let i = 0; i < 256; i++) {

  setTimeout(function() {

    container.style.background = `rgb(${i} , ${i}, ${i})`

    container2.textContent = `rgb(${i} , ${i}, ${i})`

  }, 50 * i);

}

<div class="container" style="width:200px;height:100px"></div>

<div class="container2" style="width:200px;height:100px"></div>


查看完整回答
反對(duì) 回復(fù) 2022-05-26
?
滄海一幻覺

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超5個(gè)贊

setTimeout 是異步的


<script type="text/javascript">

    let container = document.querySelector(".container")

    let i = 0;

    function nextTimeout(){

      setTimeout(function() {

            container.style.background = `rgb(${i} , ${i}, ${i})`;

            i++;

            if(i<50){

              console.log('next');

              nextTimeout()

            }

          },

      1000);


    }

    nextTimeout();                 

</script>


查看完整回答
反對(duì) 回復(fù) 2022-05-26
  • 2 回答
  • 0 關(guān)注
  • 132 瀏覽
慕課專欄
更多

添加回答

舉報(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)