在我们之前我们为大家介绍了javascript实现进度条的方法，原生实现进度条，那么如何控制进度条？js控制进度条用到的元素比较简单，就一个p标签内嵌一个span标签即可，外面那层p做背景，内部那层span做动态进度显示，由js控制。
整体代码如下：
JS控制进度条
为了方便显示，我就直接在html文档里把css文本和js脚本写了出来，这是原生js控制进度条方式，另外也可以使用Node.js或mootools之类的js库来编写。
SetProgressOne()是使用了图片来进行进度显示；SetProgressTwo()则是使用了颜色进行进度显示，原理上都是一样，都是通过JS控制span标签的属性:style="width:预设值%"即可。在表现上，使用图片就比使用颜色要好一些，因为使用颜色不好处理圆角，并不是所有浏览器都支持CSS的圆角属性，下面是效果对比：
立即学习“Java免费学习笔记（深入）”；
KPPW客客出品专业威客系统
下载
客客出品专业威客系统英文名称KPPW，也是keke produced professional witkey的缩写。KPPW是一款基于PHP+MYSQL技术构架的威客系统，积客客团队多年实践和对威客模式商业化运作的大量调查分析而精心策划研发，是您轻松搭建威客网站的首选利器。KPPW针对威客任务和商品交易模式进行了细致的分析，提供完善威客任务流程控制解决方案，并将逐步分享威客系统专业化应用作为我们的
总结：
通过本文的详细学习，相信小伙伴们对JavaScript控制进度条有了进一步的了解，希望对你的工作有所帮助！
相关推荐：
