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,本宅的春天貌似要到来了. ...
随机推荐
- centos最小化系统安装VMware tool
1.先执行命令创建环境 yum -y install update yum -y install gcc kernel-headers kernel-devel 2.然后重启reboot 3.挂载,解 ...
- Hexo系列(五) 撰写文章
在利用 Hexo 框架搭建一个属于我们自己的博客网站后,下面我们就来谈谈怎样在网站上书写我们的第一篇博客吧 一.创建文章 在站点文件夹中打开 git bash,输入如下命令创建文章,其中 title ...
- 高举 Vue-SSR
将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. SSR的目的 To solve 首屏渲染问题 SEO问 ...
- Problem 20
Problem 20 问题网址:https://projecteuler.net/problem=20 n! means n × (n − 1) × ... × 3 × 2 × 1阶乘For exam ...
- .net 单元测试
都说测试驱动开发,但是想写好单元测试其实不容易,不是因为测试用例难以构造,而是因为很多时候方法非常复杂 其中部分测试想要完成就十分费力,其中让人崩溃的地方主要如下: 实例私有函数 实例静态私有函数 十 ...
- 断路器-Hystrix的深入了解
前言 高可用相关的技术以及架构,对于大型复杂的分布式系统,是非常重要的.而高可用架构中,非常重要的一个环节,就是如何将分布式系统中的各个服务打造成高可用的服务,从而足以应对分布式系统环境中的各种各样的 ...
- bzoj3931【CQOI2015】网络吞吐量
3931: [CQOI2015]网络吞吐量 Time Limit: 10 Sec Memory Limit: 512 MB Submit: 853 Solved: 381 [Submit][id= ...
- Django 介绍、安装配置、基本使用、Django 用户注冊样例
Django介绍 Django 是由 Python 开发的一个免费的开源站点框架.能够用于高速搭建高性能.优雅的站点. DjangoMTV 的思想项目架构图 ...
- HTML5的data-*自己定义属性
HTML5添加了一项新功能是自己定义数据属性.也就是data-*自己定义属性.在HTML5中我们能够使用以data-为前缀来设置我们须要的自己定义属性,来进行一些数据的存放.当然高级浏览器下可通过脚本 ...
- c22---枚举
// // main.c // 枚举基本概念 #include <stdio.h> int main(int argc, const char * argv[]) { // int sex ...