bootstrap+jQuery实现的动态进度条功能示例


Posted in jQuery onMay 25, 2017

本文实例讲述了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显示绿色
实现进度条暂停、停止、重新开始、继续功能

具体代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>...</title>
  <!--在IE浏览器中运行最新的渲染模式-->
  <meta http-equiv="X-UA-Compatible" content="IE-Edge">
  <!--初始化移动浏览器显示-->
  <meta name="viewport" content="width-device-width,inital-scale=1">
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="index.css" rel="external nofollow" >
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
   <script type="text/javascript">
     $(document).ready(function(){
       var value = 0;
       var time = 50;
       //进度条复位函数
       function reset( ) {
        value = 0
         $("#prog").removeClass("progress-bar-success").css("width","0%").text("等待启动");
         //setTimeout(increment,5000);
       }
       //百分数增加,0-30时为红色,30-60为黄色,60-90为蓝色,>90为绿色
       function increment( ) {
         value += 1;
         $("#prog").css("width",value + "%").text(value + "%");
         if (value>=0 && value<=30) {
           $("#prog").addClass("progress-bar-danger");
         }
         else if (value>=30 && value <=60) {
           $("#prog").removeClass("progress-bar-danger");
           $("#prog").addClass("progress-bar-warning");
         }
         else if (value>=60 && value <=90) {
           $("#prog").removeClass("progress-bar-warning");
           $("#prog").addClass("progress-bar-info");
         }
         else if(value >= 90 && value<100) {
           $("#prog").removeClass("progress-bar-info");
           $("#prog").addClass("progress-bar-success");
         }
         else{
           setTimeout(reset,3000);
           return;
         }
         st = setTimeout(increment,time);
       }
       increment();
       //进度条停止与重新开始
       $("#stop").click(function () {
         if ("stop" == $("#stop").val()) {
           //$("#prog").stop();
           clearTimeout(st);
           $("#prog").css("width","0%").text("等待启动");
           $("#stop").val("start").text("重新开始");
         } else if ("start" == $("#stop").val()) {
           increment();
           $("#stop").val("stop").text("停止");
         }
       });
       //进度条暂停与继续
       $("#pause").click(function() {
         if ("pause" == $("#pause").val()) {
           //$("#prog").stop();
           clearTimeout(st);
           $("#pause").val("goon").text("继续");
         } else if ("goon" == $("#pause").val()) {
           increment();
           $("#pause").val("stop").text("暂停");
         }
       });
     });
   </script>
</head>
<body>
  <div class="progress progress-striped active">
    <div id="prog" class="progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
      <span id="proglabel">正在启动,请稍后......</span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-6">
      <button id="pause" class="btn btn-primary" value="pause">暂停</button>
      <button id="stop" class="btn btn-primary" value="stop">停止</button>
      <!--<button id="goon" class="btn btn-primary">继续<button>-->
    </div>
  </div>
</body>
</html>
jQuery 相关文章推荐
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 #jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 #jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 #jQuery
jquery.masonry瀑布流效果
May 25 #jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 #jQuery
jquery Form轻松实现文件上传
May 24 #jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 #jQuery
You might like
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
jQuery中库的引用方法
2018/01/06 jQuery
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
用python登录Dr.com思路以及代码分享
2014/06/25 Python
Python变量作用范围实例分析
2015/07/07 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
TensorFlow的权值更新方法
2018/06/14 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Python笔记之代理模式
2019/11/20 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
数组越界问题
2015/10/21 面试题
学徒工职责
2014/03/06 职场文书
倡议书的写法
2014/08/30 职场文书
教育见习报告范文
2014/11/03 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
详解Vue的options
2021/05/15 Vue.js
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python