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，循环并更改背景三次（快速）。

以下代码应该有效：

<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 个答案: