1秒后随机自动更改背景颜色(Javascript)

Question

我想制作一个应用程序，在1秒后自动更改背景颜色。下面的代码在应用程序开始时确实给出了一个随机的颜色，但它不会重新运行和更改颜色。我得到的错误是：未定义rgb在：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)。这引发了错误。

除此之外，您可能希望使用"间隔"而不是"超时"，并在每个"间隔"中计算新颜色。

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>