如何使用javascript更改背景颜色

How do i change the background color using javascript

本文关键字：背景 颜色 何使用 javascript      更新时间：2023-09-26

我本来希望运行此代码，但没有成功。有人能告诉我这个代码出了什么问题吗。。。感谢

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

上面的代码所做的是：每秒钟运行一次函数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>

我假设您希望您的代码使背景从红色、绿色、粉红色旋转，每秒旋转一步，然后返回粉红色。但实际发生的是，它变成了粉红色，然后一直呆在那里，对吧？

这是因为你对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)，因为这会创建一个无限循环，并可能导致浏览器崩溃。你真正想要的是把只改变背景颜色一次，每次都不同的东西称为。

使用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>

相关文章：