在我们之前的文章中，我们给大家介绍了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实现进度条的几种方法介绍
javascript实现进度条的原生代码
js原生上传大文件显示进度条-php上传文件
以上就是javascript进度条控件实现的示例的详细内容。