HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#bg{
position:absolute;
left: 0;
top:0;
width: 100%;
height:100%;
background-color:#000;
text-align: center;
font-size: 40px;
color: #ccc;
}
#colorline{
width:400px;
}
#colorline div{
width: 5px;
height: 2px;
float: left;
overflow:hidden;
}
</style>
</head>
<body>
<table id="bg">
<tr height="300">
<td>彩虹进度条</td>
</tr>
<tr height="100">
<td align="center">
<div id="colorline"></div>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</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")