【JS】隨著進度條進展，逐個顯示li節點
阿新 • • 發佈：2021-12-12
如下程式碼建立了一個水平進度條，隨著水平進度條的發展，逐個顯示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;"> </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