js进度条控件实现

来源：动视网责编：小采时间：2020-11-27 20:28:17

js进度条控件实现

js进度条控件实现:首先定义一个div内嵌一个span:<div id="loadbar"> <span id="bar" style="width: 10%;">10%</span> </div>然后使用css完成进度条的样式：div#loadbar{ wid

推荐度：

点击下载本文 文档为doc格式

导读js进度条控件实现:首先定义一个div内嵌一个span:<div id="loadbar"> <span id="bar" style="width: 10%;">10%</span> </div>然后使用css完成进度条的样式：div#loadbar{ wid

首先定义一个div内嵌一个span:

<div id="loadbar"> 
 <span id="bar" style="width: 10%;">10%</span> 
 </div>

然后使用css完成进度条的样式：

div#loadbar{ 
 width:300px; 
 background-color: silver; 
 border:1px solid salmon; 
 text-align: center; 
 border-radius:8px ; 
 } 
 #bar{ 
 display: block; 
 font-family: arial; 
 font-size: 12px; 
 background-color: sandybrown; 
 text-align: center; 
 padding: 5px; 
 border-radius:5px ; 
 
 }

最后用js控制进度条显示：

var i=0; 
 function startbar(){ 
 var showbar=setInterval("setbar()",1000); 
 } 
 function setbar(){ 
 console.log("setbar"); 
 i+=5; 
 if(i>=100) 
 { 
 clearInterval(showbar); 
 } 
 document.getElementById("bar").style.width=i+"%"; 
 document.getElementById("bar").innerHTML=i+"%"; 
 } 
 
 startbar();

效果如下：