javascript - 通过 Javascript 中的循环操作颜色

Question

我正在尝试创建一个 for 循环来操作 Javascript 中页面的背景，我想创建从 rgb(0;0;0) 到 rgb(255;0;0) 的淡入效果

但是我非常卡在循环中，我没有找到将变量传递给 rgb() 函数的方法。

这是我的 Javascript 代码：

var r;

function change() {
  var doc = document.body;
  var color;

  for(r = 0; r < 256; r++){
    color = rgb(r; 0; 0);
    doc.style.backgroundColor = color;
  }
}

setInterval(change, 100);

标签： javascriptloopscolorsfrontend

Answer 1

对于设置颜色，您可以使用模板文字，因为 backgroundColor 属性需要是一个字符串

color = `rgb(${r}, 0, 0)`;
doc.style.backgroundColor = color;