在我们之前的文章中，我们给大家介绍了JavaScript实现进度条的几种方式、以及JavaScript原生实现进度条的案例，那么我们今天继续给大家介绍JavaScript进度条控件实现的示例！
首先定义一个p内嵌一个span:
<p id="loadbar"> <span id="bar" style="width: 10%;">10%</span> </p>
然后使用css完成进度条的样式：
p#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();效果如下：
总结：
通过对本文的学习相信小伙伴么你对JavaScript进度条控件实现有了一定的了解、希望对你的工作有所帮助！
相关推荐：
以上是JavaScript进度条控件实现的示例的详细内容。更多信息请关注PHP中文网其他相关文章！
