我有以下代码,我希望“矩形”元素(这是一个 Canvas 元素)将颜色从黑色转换为白色。事实并非如此。请指教:
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 次更改时,这将需要很长时间才能完成,因此您可能需要调整间隔。
以下是使用 20 毫秒间隔的示例:
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/