js背景顏色過渡

Question

我有以下代碼，我想將'rect'元素（這是一個畫布元素）將顏色從黑色轉換為白色。 沒有。 請指教：

var background = document.getElementById("rect");

setInterval(function() {
    for (i=0;i<255;i++) {
        background.style.backgroundColor = 'rgb(' + [i, i, i].join(',') + ')';
    }
}, 900);

Answer 1

通過循環更改顏色，您可以一次完成所有工作。 而是對每個時間間隔回調進行一次更改：

var background = document.getElementById("rect");

var i = 0;
var timer = setInterval(function() {
    background.style.backgroundColor = 'rgb(' + [i, i, i].join(',') + ')';
    if (++i > 255) {
        clearInterval(timer);
    }
}, 900);

請注意，每次更改900毫秒，每次更改255次，這將需要很長時間才能完成，因此您可能需要調整間隔。

這是一個使用20ms間隔的示例：

 var background = document.getElementById("rect"); var i = 0; var timer = setInterval(function() { background.style.backgroundColor = 'rgb(' + [i, i, i].join(',') + ')'; if (++i > 255) { clearInterval(timer); } }, 20); 

 #rect { height: 4em; } 

 <div id="rect"></div>