Javascript 每秒钟更改一次背景色 功能更改（i）{ var doc=document.getElementById（“背景”）； var color=[“黑色”、“蓝色”、“棕色”、“绿色”]； 对于（i=0；i=color.length）{i=0；}*/ } } setInterval（函数changebackground（）{change（0）}，1000）；

大家好，

---

我正在尝试使用上面的代码更改div的背景色。只要警报是函数的一部分，该函数就可以工作（我引入警报是为了查看循环是否工作）。如何在没有警报的情况下使函数工作。我需要使用vanilla js而不是jquery。感谢您对初学者的帮助。

因为您使用的是setInterval，所以不需要使用for循环。请尝试以下方法：

var doc=document.getElementById（“背景”）；
var color=[“黑色”、“蓝色”、“棕色”、“绿色”]；
var i=0；
函数更改（）{
doc.style.backgroundColor=颜色[i]；
i++；
如果（i>color.length-1）{
i=0；
}
}
设置间隔（更改，1000）
该函数工作正常（没有警报），您只是看不到它，因为您正在同步循环中更改颜色

试着这样做：


var i=0；
函数更改（）{
var doc=document.getElementById（“背景”）；
var color=[“黑色”、“蓝色”、“棕色”、“绿色”]；
doc.style.backgroundColor=颜色[i]；
i=（i+1）%color.length；
}
设置间隔（更改，1000）
以下代码将每秒以随机颜色更改背景颜色
参考：


setInterval(
函数（）{
var randomColor=Math.floor（Math.random（）*16777215）.toString（16）；
document.body.style.backgroundColor=“#”+randomColor；
}, 1000);我把代码做成了一个代码笔，供人们玩。

var i=0；
函数更改（）{
var doc=document.getElementById（“背景”）；
var color=[“黑色”、“蓝色”、“棕色”、“绿色”]；
doc.style.backgroundColor=颜色[i]；
i=（i+1）%color.length；
}
设置间隔（更改，1000）；
 
这是从codepen.io获得的，可能会对您有所帮助

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">&nbsp</div>

var div=document.getElementById（“背景”）；
函数getRandomColor（）{
变量字母='0123456789ABCDEF'；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
函数changeColor（）{
div.style.backgroundColor=getRandomColor（）；
}
设置间隔（changeColor，1000）；
您使用
i=0调用change，并在不等待看到更改的情况下运行四种颜色中的每一种-setInterval是否应位于
lopp的
内？这将使该功能显示4种颜色，每种颜色显示1秒，将绿色保留在手绢上，它起作用了。以这种方式使用模%对我来说是很新的。由于某种原因，这对我来说不起作用。我甚至更改了设置间隔（更改，1000）；设置间隔（更改（），1000）；但这没用。我会花更多的时间在它上面，弄清楚为什么它在这里有效，但对我来说却不行。谢谢你的帮助。
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">&nbsp</div>

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);