JavaScript控制进度条的实例分析

来源：车荣汽车网

在我们之前我们为大家介绍了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控制进度条的实例分析