Question

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伙计们，我正在尝试使用上面的代码更改div的背景颜色。只要警报是其中的一部分，该功能就可以工作（我引入了警报以查看循环是否正常工作）。如何在没有警报的情况下使功能正常工作。我需要使用vanilla js而不是jquery。感谢您帮助初学者。

Answer 1

该功能正常（没有警报），您只是没有看到它，因为您在同步循环中更改了颜色。

试试这样：

＆＃13;

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

＆＃13;

<div id="background">&nbsp</div>

＆＃13;

Answer 2

由于您使用的是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>

Answer 3

我将Amit's代码制成了一个代码库，以供人们使用。 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">&nbsp</div>

Answer 4

下面的代码将每秒改变背景颜色为随机颜色参考：Change background every second

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>

Answer 5

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

每秒改变背景颜色

5 个答案: