Question

我有以下代码片段，我希望'rect'元素（它是一个canvas元素）将颜色从黑色转换为白色。它没有。请指教：

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>

js背景颜色过渡

1 个答案: