我有以下代码,我想将'rect'元素(这是一个画布元素)将颜色从黑色转换为白色。没有。请指教:

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

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

最佳答案

通过循环更改颜色,您可以一次完成所有工作。而是对每个时间间隔回调进行一次更改:

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>

关于javascript - js背景颜色过渡,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33706099/

10-11 22:28
查看更多