Javascript 使用for循环动态更改Div颜色 let colors=[“红色”、“绿色”、“青色”]； 让开始=颜色[0]； 让div=document.getElementById（“颜色”）； setInterval（函数（）{ document.getElementById（“color”）.style.backgroundColor=colors[0]； 对于（var x=0；x

基本上，它通过颜色循环，但不会重置。我到底做错了什么

更新：

感谢下面的答案，我能够理解我做错了什么。我根据我尝试使用For循环的方式重新编写了它

let colors = ["red","green","cyan"];
let start = colors[0];
let div = document.getElementById("color");


setInterval(function(){
  document.getElementById("color").style.backgroundColor=colors[0];
  for(var x = 0; x < colors.length; x++){
      document.getElementById("color").style.backgroundColor=colors[x];
      if(colors[x] == colors[colors.length-1]){
          div.style.backgroundColor=start;
          colors[x]++;
      }
    }
},500);

let colors=[“红色”、“绿色”、“青色”、“紫色”、“灰色”]；
让div=document.getElementById（“颜色”）；
document.getElementById（“color”）.style.backgroundColor=colors[0]；
对于（设x=0；x<（colors.length/colors.length）；x++）{
var i=x；
div.style.backgroundColor=颜色[i]；
}
setInterval（函数（）{
div.style.backgroundColor=颜色[i]；
i++；
if（i==colors.length）{
i=0；
}
},300);

---

虽然效率很低，但这只是出于测试目的，我希望这样做。

您每500毫秒运行一次for循环。。。但是每一次颜色变化都是在循环中立即完成的

浏览器没有时间显示除最后一个背景之外的任何内容

如果你想做的是简单地循环这些颜色，代码是非常简单的

let colors=[“红色”、“绿色”、“青色”]；
设指数=0；
让div=document.getElementById（“颜色”）；
setInterval（函数（）{
div.style.backgroundColor=颜色[索引]；
索引=（索引+1）%colors.length；
},500);

迪夫！
您每500毫秒运行一次for循环。。。但是每一次颜色变化都是在循环中立即完成的

浏览器没有时间显示除最后一个背景之外的任何内容

如果你想做的是简单地循环这些颜色，代码是非常简单的


let colors=[“红色”、“绿色”、“青色”]；
设指数=0；
让div=document.getElementById（“颜色”）；
setInterval（函数（）{
div.style.backgroundColor=颜色[索引]；
索引=（索引+1）%colors.length；
},500);

迪夫！
你能解释一下这里发生了什么吗：index=（index+1）%colors.length；模运算符（除法后的余数）。。。。例如，1%3是1-因为1/3是0，1是余数。。。2%3等于2。。。现在3%3是0（1+余数0）-这是一种简单的方法，只需将1添加到一个数字，并将其范围限制为
0…（n-1）
，或者换一种方式。。。这是一种做
index=index+1的简单方法；如果（index==colors.length）{index=0；}
谢谢你的解释：）你能解释一下这里发生了什么吗：index=（index+1）%colors.length；模运算符（除法后的余数）。。。。例如，1%3是1-因为1/3是0，1是余数。。。2%3等于2。。。现在3%3是0（1+余数0）-这是一种简单的方法，只需将1添加到一个数字，并将其范围限制为
0…（n-1）
，或者换一种方式。。。这是一种做
index=index+1的简单方法；如果（index==colors.length）{index=0；}
感谢您的解释：）
let colors = ["red","green","cyan","purple","grey"];
let div = document.getElementById("color");

document.getElementById("color").style.backgroundColor=colors[0];

for(let x = 0; x < (colors.length / colors.length); x++){
    var i = x;
    div.style.backgroundColor=colors[i];
}

setInterval(function(){
    div.style.backgroundColor=colors[i];
    i++;
    if(i==colors.length){
        i=0;
    }
},300);