javascript实现彩虹加载条

HTML

js

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