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);
大家好， 我正在尝试使用上面的代码更改div的背景颜色。 只要警报是其中的一部分（我引入了警报以查看循环是否工作），该函数就可以正常工作。 我如何在没有警报的情况下使函数正常工作？ 我需要使用原生JS而不是jQuery。 谢谢帮助初学者。
这个函数本来就能正常工作（没有警报的情况下），只是因为你在同步循环中更改了颜色，所以你看不到它的效果。
试试像这样：
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>既然您正在使用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>setInterval(
function() {
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
document.body.style.backgroundColor = "#" + randomColor;
}, 1000);这是完整的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>然后通过使用随机选择的数字来改变元素的颜色。 var heading1 = document.getElementById("2020"); change = () => { var colorList = ["蓝色", "红色", "绿色", "棕色", "橙色"]; var random_number = Math.floor(Math.random() * colorList.length) + 0; heading1.style.color = colorList[random_number]; } setInterval(change, 1000);const random_number = Math.floor(Math.random() * 4) + 0; '0'是列表的起始位置，'4'是数组的最大索引。如果你的列表很长，可以用数组的长度来替代。
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>
从codepen.io获取的内容可能会对您有所帮助
var div = document.getElementById("background");
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function changeColor(){
div.style.backgroundColor= getRandomColor();
}
setInterval(changeColor,1000);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title></title>
</head>
<body id="background">
<script>var doc=document.getElementById("background"),color=["black","red","green","blue"],i=0;function change(){doc.style.backgroundColor=color[i],++i>color.length-1&&(i=0)}setInterval(change,60)</script>
</body>
</html>
i=0调用 change 函数，并且在不等待颜色变化的情况下遍历了四种颜色 - 是否应该将 setInterval 放在for循环内部？这样可以使函数每秒显示 4 种颜色，然后保留绿色。 - Mousey