1秒后自动随机改变背景颜色

Question

我想做一个1秒后自动改变背景颜色的应用程序。下面的代码确实在应用程序启动时给出了随机颜色，但它不会重新运行并更改颜色。我得到的错误是：

rgb is not defined at <anonymous>:1:1

这是代码：

function getRandomColor() { //To give me a new rgb number everytime
return (Math.floor(Math.random() * (255 - 10)) + 10);
}

(function changeColor(){
    let color = `rgb(${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
    console.log(color);
    setTimeout(document.body.style.background = color, 
        1000);
})()    //used IIFE

Answer 1

由于创建回调的方式而出现错误，您将回调创建为：

document.body.style.background = color

JS一读取就会执行（这就是为什么你会看到颜色立即变化）并返回一个值，返回值是：

rgb(10, 11, 12)

。当你的计时器结束时，它会尝试执行：

rgb(10, 11, 12)

。这会引发错误。

除此之外，您可能想使用 Interval 而不是 Timeout，并在每个 Interval 中计算新颜色。

function getRandomColor() { //To give me a new rgb number everytime
    return (Math.floor(Math.random() * (255 - 10)) + 10);
}

function getColor() {
  return `rgb(${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
}

(function changeColor(){
    setInterval((() => document.body.style.background = getColor()), 
        1000);
})()  

Answer 2

如果我理解正确的话，你想每秒改变一次，而不是一次，对吧？要更改每秒，您需要

setInterval

并传递一个函数作为参数。每次还要重新定义颜色。

function getRandomColor() { 
  return (Math.floor(Math.random() * (255 - 10)) + 10);
}

(function changeColor(){
    setInterval( () => {
      let color = `rgb(${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
      document.body.style.background = color
    }, 1000);
})()

Answer 3

由于您想每秒更改背景颜色，因此您应该使用 setInterval 而不是 setTimeout。 setInterval 的第一个参数应该是如下所示的函数。

function getRandomColor() { //To give me a new rgb number everytime
  let color = (Math.floor(Math.random() * (255 - 10)) + 10);
  return `rgb(${color}, ${color}, ${color})`;
}

(function changeColor() {

  setInterval(() => {
      document.body.style.background = getRandomColor();
    },

    1000);
})() //used IIFE

Answer 4

如果你想实现这个功能那么你必须一步一步做一些事情
1. 创建一个生成 rgb 并在每次调用时更改背景号码的函数。
2. 将函数放入 SetInterval 中，并为每个间隔设置时间 1000。 让我们通过一个例子来做到这一点：

function changeColor(){
  var a = Math.floor(Math.random() * 255); 
  var b = Math.floor(Math.random() * 255); 
  var c = Math.floor(Math.random() * 255); 
  document.body.style.backgroundColor = "rgb(" + a + "," + b + "," + c +")";
}

setInterval(changeColor, 1000);

看看这有多容易。

Answer 5

<h1>Hello</h1>
<script>
    function changeColor(){
        var a = Math.floor(Math.random() * 255); 
        var b = Math.floor(Math.random() * 255); 
        var c = Math.floor(Math.random() * 255);              
        document.body.style.backgroundColor = "rgb(" + a + "," + b + "," + c +")";
    }

    setInterval(changeColor, 1000);
</script>

Answer 6

function getRandomColor() { 
  return (Math.floor(Math.random() * (255 - 10)) + 10);
}

(function changeColor(){
    setInterval( () => {
      let color = `rgb(${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
      document.body.style.background = color
    }, 1000);
})()

function getRandomColor() { //To give me a new rgb number everytime
  let color = (Math.floor(Math.random() * (255 - 10)) + 10);
  return `rgb(${color}, ${color}, ${color})`;
}

(function changeColor() {

  setInterval(() => {
      document.body.style.background = getRandomColor();
    },

    1000);
})() //used IIFE