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,本宅的春天貌似要到来了. ...
随机推荐
- ZooKeeper 运维经验
转自:http://www.juvenxu.com/2015/03/20/experiences-on-zookeeper-ops/ ZooKeeper 运维经验 ZooKeeper 是分布式环境下非 ...
- C#第十六节课
out using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.T ...
- 【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享（单文件版本）
整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...
- python第十周：进程、协程、IO多路复用
多进程(multiprocessing): 多进程的使用 multiprocessing是一个使用类似于线程模块的API支持产生进程的包. 多处理包提供本地和远程并发,通过使用子进程而不是线程有效地侧 ...
- flask日期和时间
本文翻译自The Flask Mega-Tutorial Part XII: Dates and Times 这是Flask Mega-Tutorial系列的第十二部分,我将告诉你如何以适配所有用户的 ...
- linux下Qt程序编译运行
Qt程序编译运行很简单,利用Qt提供的qmake工具可以很好的进行编译,在命令行输入一下编译过程:qmake -project //声称项目文件(*.pro)qmake ...
- IDEA入门级使用教程
原文链接:https://blog.csdn.net/qq_31655965/article/details/52788374 最智能的IDE IDEA相对于eclipse来说最大的优点就是它比ecl ...
- Linux 命令未自动提示补全
解决方法: yum install -y bash-completion 退出当前界面,重新进入即可.
- 自己定义ShareSDK分享平台界面
自己定义ShareSDK分享平台界面 执行效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FvX2NodW4=/font/5a6L5L2T/fo ...
- Justinmind使用教程（1）——概述部分
Justinmind(http://www.justinmind.com/),类似于Axure的一个原型设计工具.就眼下而言,最适合移动端进行原型设计的工具,预计抛开Axure几条街了,可是眼下国内站 ...