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>
bootstrap与jQuery结合的动态进度条的更多相关文章
- bootstrap得动态进度条
Bootstrap的动态进度条: html: 创建一个modal 这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单 <div class=" ...
- bootstrap课程9 bootstrap如何实现动画加载进度条的效果
bootstrap课程9 bootstrap如何实现动画加载进度条的效果 一.总结 一句话总结:在bootstrap进度条的基础上添加js(定时器),动态的改变进度条即可.很简单的. 1.路径导航是什 ...
- Bootstrap历练实例：动画的进度条
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例：堆叠的进度条
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例：默认的进度条
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 创建一个jQuery UI的垂直进度条效果
日期:2013-9-24 来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...
- 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...
- Qt实现炫酷启动图-动态进度条
目录 一.简述 二.动效进度条 1.光效进度条 2.延迟到达进度条 3.接口说明 三.启动图 1.实现思路 2.背景图切换 四.测试 1.构造启动图 2.背景图 3.其他信息 4.事件循环 五.源码 ...
- Jquery网页加载进度条（随笔，当然要随便写，当日记动态心情写咯）
首先先是吐槽时间... 告诉大家一个好消息,就是有个妹子非常仰慕我的前端技术说要包养我 然后有好多羡慕嫉妒恨的童鞋一定要说,少年你太天真了,那一定是HR 然后我表示她不是HR,本宅的春天貌似要到来了. ...
随机推荐
- css 陌生属性
记录一些我之前没见过属性 1.width:100vh 100vh 2.min-height:calc(100vh + 51px);cale 3.:nth-child nth-child 和 :n ...
- 通过redis协议构建脏字过滤微服务
下载 https://github.com/jonnywang/... 安装使用 mkdir -p /data/server/wordsFilter cd /data/server/wordsFilt ...
- tornado服务器运行django应用
在jumpserver项目中看到的 def main(): from django.core.wsgi import get_wsgi_application import tornado.wsgi ...
- AtCoder ABC 070D - Transit Tree Path
传送门:http://abc070.contest.atcoder.jp/tasks/abc070_d 本题是一个图论问题——树(Tree). 有一棵结点数目为n的无向树.第i条边连接结点ai与bi, ...
- hdu 1245 Saving James Bond 策画几何+最短路 最短路求步数最少的路径
#include<stdio.h> #include<string.h> #include<math.h> #define inf 0x3fffffff #defi ...
- [bzoj2242][Sdoi2011]计算器_exgcd_BSGS
计算器 bzoj-2242 Sdoi-2011 题目大意:裸题,支持快速幂.扩展gcd.拔山盖世 注释:所有数据保证int,10组数据. 想法:裸题,就是注意一下exgcd别敲错... ... 最后, ...
- Mysql查询缓存研究
转载声明:本文为DBA+社群原创文章,转载必须连同本订阅号二维码全文转载,并注明作者名字及来源:DBA+社群(dbaplus). http://mp.weixin.qq.com/s?__biz=MzI ...
- javaScript面向对象继承方法经典实现
转自原文javaScript面向对象继承方法经典实现 JavaScript的出现已经将近20多年了,但是对这个预言的褒贬还是众说纷纭.很多人都说JavaScript不能算是面向对象的变成语言.但是Ja ...
- HDU 3934
/*这是用的有旋转卡壳的思想. 首先确定i,j,对k进行循环,知道找到第一个k使得cross(i,j,k)>cross(i,j,k+1),如果k==i进入下一次循环. 对j,k进行旋转,每次循环 ...
- pl/sql developer 自动输入替换 光标自动定位
pl/sql developer 自动输入替换 工具->首选项->用户界面->编辑器->自动替换,自己定义一些规则,然后输入key,点击tab或者空格,就可以进行替换了: SL ...