3

我正在尝试使用 for loop 和 rgb() values 不断更改 div 标签的背景。以下是我用 sample.html 编写的代码：

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>sample</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script >
        <script>
        $(document).ready(function(){
            var r=0;
            var g=0;    
            var b=0;

            for(r=0;r<255;r++)
            {
                for(g=0;g<255;g++)
                {
                    for(b=0;b<255;b++)
                    {
                        $("#sqr").css("background-color","rgb(r,g,b)");
                    }
                }
            }
        });

        </script>


        <style>
        #sqr{background-color:rgb(255,0,0);
             height:200px;
              width:200px;
            }
        </style>

    </head>
    <body>

    <div id="sqr">
    </div>

    </body>
    </html>

所以有谁能告诉我应该如何编写代码，以便在页面加载时 div 的背景颜色会自动变化？请注意，我想非常顺利地更改颜色。

如果您想查看我想要的效果，请访问：here并查看其显示效果。

根据一些建议，我已将代码更改为：

$("#sqr").css("background-color","rgb("+r+","+g+","+b+")");

现在它正在正确获取 rgb 的值，但没有在浏览器中正确加载效果，显示对话框：

对话框

4

3 回答 3

10

由于这个问题被标记为 CSS，我想为此提供一个纯 CSS 解决方案，只需使用 CSS3 @keyframes，您可以简单地为您想要的元素添加颜色，可以使用步进动画%，还可以使用animation-iteration-count并将其设置为infinite. 如果你想在有限的时间内迭代它，只需将它更改为infinite你想要的任何值，但要确保它是一个整数。

演示

.animate {
    height: 200px;
    width: 400px;
    border: 1px solid #000;
    -webkit-animation: animate_bg 5s;
    animation: animate_bg 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes animate_bg {
    0%   {background:red;}
    50%  {background:green;}
    100% {background:blue;}
}

@-webkit-keyframes animate_bg {
    0%   {background:red;}
    50%  {background:green;}
    100% {background:blue;}
}

这是在 CSS3 规范中引入的，因此您可以参考此链接以获取浏览器支持。

有许多polyfill可用于不支持 CSS3 的浏览器@keyframes，因此，如果您希望支持旧版浏览器，如果您不关心旧版浏览器，则可能需要使用它，那么您可以毫不犹豫地使用它。

于 2013-10-04T07:37:41.417 回答
2

除了设置 CSS 的代码之外，一切似乎都很好。

更改代码：

$("#sqr").css("background-color","rgb(r,g,b)");

至 ：

$("#sqr").css("background-color","rgb(" + r + "," + g + "," + b + ")");

这现在将传入数字值，即

$("#sqr").css("background-color","rgb(254,254,254)");

和以前一样，它会简单地传递值r,g,b，因为您将它们放在一个字符串中。

于 2013-10-04T07:34:28.040 回答
0

您可以使用.setInterval()

将您的代码包含在一个名为的函数中animate

var intervalID = window.setInterval(animate, 500);

不确定是否正确

$("#sqr").css("background-color","rgb(" + r +"," +g+"," +b +")");
于 2013-10-04T07:34:41.120 回答