怎么用js实现渐变切换背景颜色

我的思路是弄一个数组把几种颜色放进去，然后设置一个时间(时间较短)，从数组的第一个颜色快速渐变到数组的第二个颜色，变成第二个颜色后再停留一阵子(时间较长)，再从第二个元素快速渐变到第三个元素，接着就是像这样的循环，我不知道怎么改变rgb的值也不太清楚怎么实现一直循环，求位指教！谢谢了！

屎代码，题主将就看吧，望大大狂喷

;(function changeColor() {
        var arr = ['#00CC99', '#00FFFF', '#CCCCFF']
        var t = 2000
        var n = false
        var body = document.querySelector('body')
        body.style.transition = 'background-color 500ms'

        function change() {
            n = !n
            var v = arr.shift()
            body.style.backgroundColor = v
            arr.push(v)
            if(n) {
                setTimeout(change, t)
            } else {
                setTimeout(change, 3*t)
            }
        }

        change()
    })()

直接复制粘贴到console，enter看效果

循环的话可以用setInterval函数，然后再里面实现颜色切换：

$("body").css('background-color',颜色值);

补充：
其实完全可以用css3的animation实现。

以前写的，仅供参考啊。
http://www.cnblogs.com/zjfree/archive/2011/10/20/2219071.html
http://www.cnblogs.com/zjfree/archive/2011/10/20/2219044.html

正好我以前写过一个这个，是你要的东西吗？

http://codepen.io/fishenal/pen/LhHsg

我重新描述下我理解到你想要的动画过程吧！不对请指出
time0: 颜色1
time1: 维持颜色1
time2: 开始向颜色2渐变（此时任然是颜色1）
time3: 颜色完全由颜色1渐变为颜色2
time4: 维持颜色2
。。。
重复以上过程（颜色可以不止2种）
其中 time1 － time0 是颜色维持的时间(较长)
time2 ＝ time1
time3 － time2 是颜色渐变的过渡时间(较短)
time4 － time3 ＝ time1 － time0

如果上述描述的过程是题主的意思，请往下看，否则可以忽略了
这个东西可以用纯css实现，也可以css结合js实现

纯css实现使用css3的animate ＋ keyframe来实现，不多做介绍

css＋js实现：

css部分

cssselector {
    transition: background-color (time3-time2) 过渡的函数;
    /* 其它样式 */
}

js部分

以下的$element是这个元素的jquery实例

javascriptvar color_array = [color1, color2, color3, color4];//你说的颜色数组
var current_color_index = 0;
var duration = time3 - time0; //颜色的维持时间 ＋ 颜色的过渡时间

function colorChange() {
    //将颜色更改，然后css会执行渐变的过程
    $element.css('background-color', color_array[current_color_index]);
    //确保在颜色数组内循环变化
    current_color_index = (current_color_index + 1) % color_array.length;
    //定时改变颜色，可以将这个动作放到外部通过setInterval来循环，就这个例子来说，他们之间没太大区别。
    setTimeout(arguments.callee, duration);
}

colorChange();

<!DOCTYPE html>
<html>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <head>
      <script type="text/javascript" src="script/jquery-1.4.4.min.js"></script>

      <script>
        $(function(){
            var orgColors=[
                {r:0,g:0,b:255},
                {r:255,g:127,b:80},
                {r:34,g:165,b:13}
                ]
            var colorGrandientSteps=10;
            //form color1  to   color2
            function getColor(color0,color1,curstep,defaultStep){
                return {
                    g:parseInt(color0.g+(color1.g-color0.g)/defaultStep*curstep,10),
                    r:parseInt(color0.r+(color1.r-color0.r)/defaultStep*curstep,10),
                    b:parseInt(color0.b+(color1.b-color0.b)/defaultStep*curstep,10)
                }
            }
            var renderColor=(function(colors,defaultStep){
                var curstep=1;
                var color1=colors[0],color2=colors[1];
                return function(){
                    var newColor=getColor(color1,color2,curstep,defaultStep);
                    var cssColor='rgb('+newColor.r+','+newColor.g+','+newColor.b+')';
                    $('div#colorDiv').css({
                        "background-color":cssColor
                    });
                    curstep++;
                    if(curstep===defaultStep+1){
                        //curstep 置为=1
                        curstep=1;
                        colors.push(color1);
                        colors.shift();
                        color1=colors[0];
                        color2=colors[1];
                    }
                }
            })(orgColors,colorGrandientSteps);

            setInterval(function(){
                renderColor();
            },50);

        });
      </script>

  </head>
  <body style="margin:0px;border:0px solid #cccccc;width:100%;height:100%"  >
     <div id="colorDiv" style="width:100px;height:100px;border:1px solid #cccccc;"></div>

  </body>
</html>

【热门文章】