【JS】随着进度条进展，逐个显示li节点

如下代码创建了一个水平进度条，随着水平进度条的发展，逐个显示table中的每个li元素，显示顺序由li元素的order属性控制。

代码如下，就不多解释了，懂得都懂。

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>创建动态链接的三种方式</title>
     <style type="text/css">
        
     </style>
    </head>

     <body>
        <div id="progressBar" style="width:0%;height:2px;">&nbsp;</div>
        <table>
            <tbody id="mytable">
                <tr>
                    <td valign="top">
                        <ul>
                            <li order="1" style="display:none;">FileName</li>
                        </ul>
                    </td>
                    <td valign="top">
                        <ul>
                            <li order="2" style="display:none;">GroupName</li>
                        </ul>
                    </td>
                    <td valign="top">
                        <ul>
                            <li order="3" style="display:none;">Vname1</li>
                            <li order="4" style="display:none;">Vname2</li>
                            <li order="5" style="display:none;">Vname3</li>
                            <li order="6" style="display:none;">Vname4</li>
                            <li order="7" style="display:none;">Vname5</li>
                            <li order="8" style="display:none;">Vname6</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
     </body>
</html>
<script type="text/javascript">
<!--
    var liArray=findLiElms();
    var count=0;
    var handler=setInterval(autoSubmit,100);

    function autoSubmit(){
        count++;

        for(var i=0;i<liArray.length;i++){
            var obj=liArray[i];
            if(count>obj.percent){
                obj.elm.style.display="block";
            }
        }

        if(count>100){
            clearInterval(handler);
        }else{
            var progressBar=document.getElementById("progressBar");
            progressBar.style.width=count+"%";
        }
    }

    function findLiElms(){
        var table=document.getElementById("mytable");
        var lis=table.getElementsByTagName("li");
        
        var arr=[];

        for(var i=0;i<lis.length;i++){
            var li=lis[i];

            var obj={elm:li,order:li.getAttribute("order"),percent:0};

            if(li.hasAttribute("order")){
                arr.push(obj)
            }
        }

        var comparer=function(a,b){
            return a.order-b.order;
        }

        arr.sort(comparer);

        for(var i=0;i<arr.length;i++){
            var elm=arr[i];
            elm.percent=parseInt(Math.ceil(100*i/arr.length));
        }    

        return arr;
    }

//-->
</script>

END

posted @ 2021-12-12 10:31  不朽的飞翔  阅读(134)  评论(0)    收藏  举报