如下代码创建了一个水平进度条，随着水平进度条的发展，逐个显示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="0%;height:2px;background-color:teal;"> </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