如何使用JavaScript更改背景颜色

Question

我期望这段代码可以运行，但是没有用。 有人可以告诉我这段代码有什么问题吗...谢谢

<script>

var color = ["red","green","pink"];

function changeBackground(){

    for(var i=0; i<color.length; i++){
        document.body.style.background = color[i];

        if(i == color.length){
            i = 0;
        }
    }
}

setInterval(changeBackground, 1000);

</script>

Answer 1

上面的代码所做的是：每秒运行一次changeBackground函数，该函数循环遍历并更改背景3次（快速）。

下面的代码应该工作：

<script>

var color = ["red","green","pink"];
var index = 0;

function changeBackground(){
    document.body.style.background = color[index];
    index = index + 1;
    if(index == color.length){
        index = 0;
    }
}
setInterval(changeBackground, 1000);
</script>

Answer 2

我假设您期望代码使背景从红色旋转到绿色，再变为粉红色，每秒进行一步，然后再回到粉红色。 但是实际上发生的是将其设置为粉红色然后停在那里，对吗？

那是因为您对setInterval工作方式有些误解。 让我们首先来看一下您的changeBackground函数：

var color = ["red","green","pink"];
function changeBackground () {
  for(var i = 0; i < color.length; i++){
    document.body.style.background = color[i];
    if (i == color.length) {
      i = 0;
    }
  }
}

需要注意的两件事：首先，您的条件if (i == color.length) 永远不会解析为true 。 这是因为循环仅在i < color.length执行。

其次，此循环将很快执行。 如此之快，以至于您甚至没有注意到就将背景色设置为红色，然后为绿色，然后为粉红色，因此您所看到的只是粉红色的背景。 这正是正在发生的事情。

然后，您每秒调用一次此函数。 但是，每次调用它时，它的功能完全相同：它会迅速更改背景色，甚至看不到它，然后将其保留为粉红色。

然而！ 我不建议您尝试执行将条件更改为if (i == color.length - 1) ，因为这将导致无限循环并可能导致浏览器崩溃。 您真正想要的是仅调用一次可以改变背景颜色的东西，并且每次都可以改变背景颜色。

Answer 3

使用jQuery，DOM选择器总是更容易

 $(document).ready(function(){ var color = ["red","green","pink"]; function changeBackground(){ for(var i=0; i<color.length; i++){ $('body').css('background-color', color[i]); if(i == color.length){ i = 0; } } } setInterval(changeBackground, 1000); });

 <html> <title>Title</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="app.js"></script> </head> <body> </body> </html>

如何使用JavaScript更改背景颜色

问题描述

3 个解决方案

解决方案1
1 2016-04-21 00:10:21

解决方案2
1 2016-04-21 00:13:14

解决方案3
-1 2016-04-21 00:12:55

如何使用JavaScript更改背景颜色

问题描述

3 个解决方案

解决方案1 1 2016-04-21 00:10:21

解决方案2 1 2016-04-21 00:13:14

解决方案3 -1 2016-04-21 00:12:55

解决方案1
1 2016-04-21 00:10:21

解决方案2
1 2016-04-21 00:13:14

解决方案3
-1 2016-04-21 00:12:55