在我们之前的文章中，我们给大家介绍了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控制进度条显示：
立即学习“Java免费学习笔记（深入）”；
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中文网其它相关文章！
java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
777
