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,本宅的春天貌似要到来了. ...
随机推荐
- Java 8 集合不完全一览
JDK 8 List 名称 线程安全 数据结构 允许 null 默认初始容量 扩容策略 备注 ArrayList 不安全 数组 允许 10 1.5 * old LinkedList 不安全 双链表 允 ...
- GOF23设计模式之代理模式
GOF23设计模式之代理模式 核心作用:通过代理,控制对对象的访问.可以详细控制访问某个(某类)对象的方法,在调用这个方法前做前置处理,调用这个方法后做后置处理(即:AOP的微观实现) AOP(Asp ...
- sqlalchemy带条件查询相关应用
sqlalchemy带条件查询 filter_by与filter filter_by 与filter的区别: 1. filter_by只能取值= filter可以==,!=,>=,<=等多 ...
- 洛谷—— P1041 传染病控制
https://www.luogu.org/problem/show?pid=1041 题目背景 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范围流行,该国政府决定不惜 ...
- Spring Boot错误：Unable to start embedded container...的问题解决
解决方法: 1.用错了注解,改用以下注解: @SpringBootApplication 相当于:@Configuration.@ServletComponentScan.@EnableAutoCon ...
- Android获取设备屏幕宽高像素值的两个方法
private void get1() { Resources resources = this.getResources(); DisplayMetrics dm = resources.getDi ...
- android 软键盘的显示与隐藏问题的研究
在android中,常常会和输入法的软件键盘交互.在Manifest文件中,系统给activity的一个属性-windowSoftInputMode来控制输入法的显示方式. 该属性提供了Activit ...
- HDU-4451-Dressing （2012年金华赛区J题）
Dressing Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
- POJ 1625
什么鬼,真的是有负数的吗?我在字符加上了128才过了.dp[i][j],经过i步到达j状态的路径数.转移很容易了,建个trie图就可以,由前一步可连通到和更新即可. 另外,要用到大数和AC自动机DP ...
- Cloud Foundry中DEA与warden通信完毕应用port监听
在Cloud Foundry v2版本号中,DEA为一个用户应用执行的控制模块,而应用的真正执行都是依附于warden. 更详细的来说,是DEA接收到Cloud Controller的请求:DEA发送 ...