Question

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

基本上，它会循环显示颜色，但不会重置。我在这里实际上在做什么错？

更新：

多亏了以下答案，我才能够了解自己在做错什么。我已经根据尝试使用For循环的方式重新编写了它。

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

尽管效率很低，但这是我仅出于测试目的而想要这样做的方式。

Answer 1

您每500毫秒运行一次for循环...但是每次更改颜色都会立即在循环内完成

除了最后的背景，浏览器没有时间显示其他任何内容

如果您只想在这些颜色之间循环，则代码非常简单

let colors = ["red","green","cyan"];
let index = 0;
let div = document.getElementById("color");

setInterval(function(){
    div.style.backgroundColor=colors[index];
    index = (index + 1) % colors.length;
},500);

<div id="color">
DIV!
</div>

使用for循环动态更改Div颜色

1 个答案: