首页 > 代码库 > bootstrap与jQuery结合的动态进度条

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="http://www.mamicode.com/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 = http://www.mamicode.com/0;"#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="http://www.mamicode.com/pause">暂停</button>88             <button id="stop" class="btn btn-primary" value="http://www.mamicode.com/stop">停止</button>89             <!--<button id="goon" class="btn btn-primary">继续<button>-->90         </div>91     </div>            92 </body>93 </html>

bootstrap与jQuery结合的动态进度条