bootstrap与jQuery结合的动态进度条

此款进度条实现的功能：

1.利用了bootstrap的进度条组件。

　　a.在最外层的<div>中加入class .progress，在里层<div>加入class .progress-bar从而实现基本的进度条。

　　b.在外层<div>中加入class .progress－striped实现条纹进度条。

　　c.在内层<div>加入class .progress－bar－danger/warning/info/success 从而实现红色、黄色、蓝色、绿色

　　d.在外层<div>中加入class .active 实现动画效果

2.利用jQuery对进度条进度进行控制。

　　0-30时显示红色，30-60显示黄色，60-90显示绿色，90-100显示绿色

　　实现进度条暂停、停止、重新开始、继续功能

具体代码如下：

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>...</title>
 6     <!--在IE浏览器中运行最新的渲染模式-->
 7     <meta http-equiv="X-UA-Compatible" content="IE-Edge">
 8     <!--初始化移动浏览器显示-->
 9     <meta name="viewport" content="width-device-width,inital-scale=1">
10     <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
11     <link rel="stylesheet" type="text/css" href="index.css">
12     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
13       <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
14       <script type="text/javascript">
15           $(document).ready(function(){
16               var value = 0;
17               var time = 50;
18               //进度条复位函数
19               function reset( ) {
20                 value = 0
21                   $("#prog").removeClass("progress-bar-success").css("width","0%").text("等待启动");
22                   //setTimeout(increment,5000);
23               }
24               //百分数增加，0-30时为红色，30-60为黄色，60-90为蓝色，>90为绿色
25               function increment( ) {
26                   value += 1;
27                   $("#prog").css("width",value + "%").text(value + "%");
28                   if (value>=0 && value<=30) {
29                       $("#prog").addClass("progress-bar-danger");
30                   }
31                   else if (value>=30 && value <=60) {
32                       $("#prog").removeClass("progress-bar-danger");
33                       $("#prog").addClass("progress-bar-warning");
34                   }
35                   else if (value>=60 && value <=90) {
36                       $("#prog").removeClass("progress-bar-warning");
37                       $("#prog").addClass("progress-bar-info");
38                   }
39                   else if(value >= 90 && value<100) {
40                       $("#prog").removeClass("progress-bar-info");
41                       $("#prog").addClass("progress-bar-success");
42                   }
43                   else{
44                       setTimeout(reset,3000);
45                       return;
46
47                   }
48
49                   st = setTimeout(increment,time);
50               }
51
52               increment();
53               //进度条停止与重新开始
54               $("#stop").click(function () {
55                   if ("stop" == $("#stop").val()) {
56                       //$("#prog").stop();
57                       clearTimeout(st);
58                       $("#prog").css("width","0%").text("等待启动");
59                       $("#stop").val("start").text("重新开始");
60                   } else if ("start" == $("#stop").val()) {
61                       increment();
62                       $("#stop").val("stop").text("停止");
63                   }
64               });
65               //进度条暂停与继续
66               $("#pause").click(function() {
67                   if ("pause" == $("#pause").val()) {
68                       //$("#prog").stop();
69                       clearTimeout(st);
70                       $("#pause").val("goon").text("继续");
71                   } else if ("goon" == $("#pause").val()) {
72                       increment();
73                       $("#pause").val("stop").text("暂停");
74                   }
75               });
76           });
77       </script>
78 </head>
79 <body>
80     <div class="progress progress-striped active">
81         <div id="prog" class="progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
82             <span id="proglabel">正在启动，请稍后......</span>
83         </div>
84     </div>
85     <div class="form-group">
86         <div class="col-sm-offset-4 col-sm-6">
87             <button id="pause" class="btn btn-primary" value="pause">暂停</button>
88             <button id="stop" class="btn btn-primary" value="stop">停止</button>
89             <!--<button id="goon" class="btn btn-primary">继续<button>-->
90         </div>
91     </div>
92 </body>
93 </html>