javascript - 更改 `setInterval` 内元素的背景颜色

Question

我试图通过使用 <h1> 使 document.getElementById("h1").style 元素的颜色每 300 毫秒改变一次，并将其设为随机颜色的变量，但它似乎不起作用。

这是我的代码:

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
var newColor = getRandomColor();
function color() {
    document.getElementById("h1").style = "backgroundColor = " + newColor;
    setTimeout(color(), 300)
}

Answer 1

一些提示:

• 您不能使用标签名称 ( h1 ) 作为 getElementById 的参数除非你在你的 HTML 中设置一个(我建议重命名)；

• 您需要使用 element.style.backgroundColor = newColor更新 CSS 样式；

• 您需要省略 color() 之后的括号当您将函数传递给 setTimeout 时(否则您将传递该函数的返回值)；

• 你应该调用 getRandomColor在你的颜色函数中，所以你每次都会得到不同的颜色；

• 您可以使用 setInterval而不是递归调用 setTimeout里面color , 自 setInterval可以将额外的参数传递给您的回调函数，您无需保存 <h1>在全局变量中。

编辑:您可以大大缩短 getRandomColor使用 JavaScript 的 native 十六进制字符串转换功能:number.toString(16)

---

演示片段:

function getRandomColor () {
  return '#' + (
    '000000' + (Math.random() * 0x1000000).toString(16)
  ).slice(-6)
}

function color (heading) {
  heading.style.backgroundColor = getRandomColor()
}

setInterval(color, 300, document.getElementById('heading'))

<h1 id="heading">Heading</h1>