每秒改变背景颜色答案

【问题标题】：change background color every second每秒改变背景颜色
【发布时间】：2015-09-17 21:57:18
【问题描述】：

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。感谢您帮助初学者。

【问题讨论】：

您用i=0 调用 change 并遍历四种颜色中的每一种 而不等待看到更改 - setInterval 应该在里面for洛普？这将使函数显示 4 种颜色，每种颜色持续 1 秒，之后颜色为绿色

标签： javascript

【解决方案1】：

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

试试这样：

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

&lt;div id="background"&gt;&amp;nbsp&lt;/div&gt;

【讨论】：

谢谢，它成功了。以这种方式使用模 % 对我来说很新鲜。

【解决方案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);

&lt;div id="background" style="height: 200px;"&gt;&lt;/div&gt;

【讨论】：

由于某种原因这不起作用。我什至改变了 setInterval (change, 1000);设置间隔（更改（），1000）；但这没有帮助。我会花更多时间来弄清楚为什么它在这里有效，但不适用于我。感谢您的帮助。

【解决方案3】：

下面的代码将每秒用随机颜色改变背景颜色参考：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>

【讨论】：

【解决方案4】：

我将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>

【讨论】：

【解决方案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);

【讨论】：