javascript 每秒更改背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32640607/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change background color every second
提问by kofi
function change(i) {
var doc = document.getElementById("background");
var color =[ "black", "blue", "brown", "green"];
for(i=0; i<color.length; i++){
doc.style.backgroundColor = color[i];
alert("my color is "+ color[i]);
/*if (i>=color.length){i=0;}*/
}
}
setInterval(function changebackground(){change(0)},1000);
HI Folks, I am trying to change the background color of a div using the code above. The function works as long as the alert is part of it (I introduced the alert to see if the loop was working ). How do I get the function working without the alert. I need to use vanilla js not jquery. Thanks for helping a beginner.
嗨，伙计们，我正在尝试使用上面的代码更改 div 的背景颜色。只要警报是它的一部分，该功能就可以工作（我引入了警报以查看循环是否正常工作）。如何在没有警报的情况下使该功能正常工作。我需要使用 vanilla js 而不是 jquery。感谢您帮助初学者。
回答by Amit
The function works fine (without the alert), you're just not seeing it since you're changing the color within a synchronous loop.
该函数工作正常（没有警报），您只是没有看到它，因为您正在同步循环中更改颜色。
Try like this:
像这样尝试：
var i = 0;
function change() {
var doc = document.getElementById("background");
var color = ["black", "blue", "brown", "green"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
}
setInterval(change, 1000);<div id="background"> </div>回答by Mario Pabon
Since you're using setInterval, there's no need to use a for loop. Try this instead:
由于您使用的是 setInterval，因此无需使用 for 循环。试试这个：
var doc = document.getElementById("background");
var color = ["black", "blue", "brown", "green"];
var i = 0;
function change() {
doc.style.backgroundColor = color[i];
i++;
if(i > color.length - 1) {
i = 0;
}
}
setInterval(change, 1000);<div id="background" style="height: 200px;"></div>回答by Saxo_Broko
I made Amit'scode into a codepen for people to play around with. https://codepen.io/Saxo_Broko/pen/eYOWJYr
我把Amit 的代码做成了一个 codepen 供人们玩。 https://codepen.io/Saxo_Broko/pen/eYOWJYr
var i = 0;
function change() {
var doc = document.getElementById("background");
var color = ["black", "blue", "brown", "green"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
}
setInterval(change, 1000);
<div id="background"> </div>
回答by Saruque Ahamed Mollick
The below code will change background color with a random color every second Reference : Change background every second
下面的代码将每秒使用随机颜色更改背景颜色参考：每秒更改背景
setInterval(
function() {
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
document.body.style.backgroundColor = "#" + randomColor;
}, 1000);Here is the full HTML example
这是完整的 HTML 示例
<!DOCTYPE html>
<html>
<head>
<title>Change bg color every 1 seconds</title>
</head>
<body>
<h1>Background Color is being changed every 1 seconds</h1>
<script>
setInterval(
function () {
var randomColor = Math.floor(Math.random()*16777215).toString(16);
document.body.style.backgroundColor = "#"+randomColor;
},1000);
</script>
</body>
</html>