javascript实现彩虹加载条

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

图片描述

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hhkak01jkaa

HTML

js

猜你喜欢