javascript实现彩虹加载条

    
    
    


    

        

            
彩虹进度条
        
        

            

                

            
        
        

            

        
    

var CL = document.getElementById("colorline");

function makeCLine(){
    var r =255;
    var g = 0;
    var b = 0;
    var step = 1;
    
    // 1.增加绿色
    // 2.减少红色
    // 3.增加蓝色
    // 4.减少绿色
    for(var i=0; i<80; i++){
        var node = document.createElement("div");
        if(g > 255 && step == 1)
            step = 2;
        if(r < 0 && step == 2)
            step = 3;
        if(b > 255 && step == 3)
            step = 4;
        node.style.backgroundColor = "rgb("+ r + "," + g + "," + b + ")";
        CL.appendChild(node);

        if(step == 1)
            g+=14;
         if(step ==2)
             r-=14;
         if(step == 3)
             b+=14;
         if(step == 4)
             g-=14;
    }
    var oNodeL = CL.firstChild;
    var oNodeR = CL.lastChild;

    for(var i = 0; i < 20; i ++){
        oNodeL.style.cssText += ";opacity:" + (0.05 * i);
        oNodeR.style.cssText += ";opacity:" + (0.05 * i);
        oNodeL = oNodeL.nextSibling;
        oNodeR = oNodeR.previousSibling;
    }
}

function makeCLmove(){
    var colors = [];
    for(var i = CL.lastChild; i; i = i.previousSibling){
        if(i.style){
            colors.unshift(i.style.backgroundColor);
        }
        var flag = 1;
        var j = 0;
        setInterval(function(){
            var sTempColor = CL.lastChild.style.backgroundColor;
            var oNodeL = CL.firstChild;
            for(var i = CL.lastChild; i; i = i.previousSibling){
                if(i.previousSibling && i.previousSibling.style){
                    i.style.backgroundColor = i.previousSibling.style.backgroundColor;
                }
                if(j > (colors.length - 1)){
                    flag = 0;
                }else if(j <1){
                    flag = 1;
                    oNodeL.style.backgroundColor = flag ? colors[j++] : colors[j--];
                }
            }
        
        }, 100)    
    }
}
       
makeCLine();
setInterval("makeCLmove()","10")