在我们之前我们为大家介绍了javascript实现进度条的方法，原生实现进度条，那么如何控制进度条？js控制进度条用到的元素比较简单，就一个p标签内嵌一个span标签即可，外面那层p做背景，内部那层span做动态进度显示，由js控制。
整体代码如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>js控制进度条</title>
<style type="text/css">
body
{
height:30px;
width:330px;
background-color:blue;
}
#progressbarbackgroundone
{
background:url(progressbk.png) no-repeat 0 center;
height:10px;
width:300px;
}
#progressbarone
{
background:url(progressft.png) no-repeat 0 center;
height:10px;
width:0%;
display:block;
}
#progressbarbackgroundtwo
{
background-color:white;
height:10px;
width:300px;
}
#progressbartwo
{
background-color:gray;
height:10px;
width:0%;
display:block;
}
</style>
<script type="text/javascript">
var numone = 0;
var numtwo = 0;
function setprogressone() {
var progressone = document.getelementbyid('progressbarone');
if (numone < 100) {
numone = numone + 1;
}
progressone.setattribute('style', 'width:' + numone + '%');
settimeout(setprogressone, 500);
}
function setprogresstwo() {
var progresstwo = document.getelementbyid('progressbartwo');
if (numtwo < 100) {
numtwo = numtwo + 1;
}
progresstwo.setattribute('style', 'width:' + numtwo + '%');
settimeout(setprogresstwo, 500);
}
</script>
</head>
<body>
<p id="progressbarbackgroundone"><span id="progressbarone"></span></p>
<p id="progressbarbackgroundtwo"><span id="progressbartwo"></span></p>
</body>
<script type="text/javascript">
setprogressone();
setprogresstwo();
</script>
</html>
为了方便显示，我就直接在html文档里把css文本和js脚本写了出来，这是原生js控制进度条方式，另外也可以使用node.js或mootools之类的js库来编写。
setprogressone()是使用了图片来进行进度显示；setprogresstwo()则是使用了颜色进行进度显示，原理上都是一样，都是通过js控制span标签的属性:style=width:预设值%即可。在表现上，使用图片就比使用颜色要好一些，因为使用颜色不好处理圆角，并不是所有浏览器都支持css的圆角属性，下面是效果对比：
总结：
通过本文的详细学习，相信小伙伴们对javascript控制进度条有了进一步的了解，希望对你的工作有所帮助！
相关推荐：
javascript进度条控件实现的示例
javascript实现进度条的几种方法介绍
javascript实现进度条的原生代码
以上就是javascript控制进度条的实例分析的详细内容。