jquery模拟进度条实现方法


Posted in Javascript onAugust 03, 2015

本文实例讲述了jquery模拟进度条实现方法。分享给大家供大家参考。具体如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js模拟进度条练习</title>
<script type='text/javascript' src="http://xiazai.3water.com/201508/yuanma/jquery-1.8.0.min.js"></script>
<script type='text/javascript' src='http://xiazai.3water.com/201508/yuanma/jquery.artDialog.js?skin=default'></script>
<style>
body{ font-size:12px}
.aui_nw, .aui_ne, .aui_sw, .aui_se { height: 1px; width: 1px; }
.aui_outer, .aui_inner { border: 0; }
.aui_state_lock .aui_border { box-shadow: 0 0 10px rgba(0, 0, 0, .8); }
</style>
</head>
<body>
<button id="starLoading">显示进度条</button>
<div id="msgHtml">https://3water.com</div>
</body>
</html>
<script>
  (function(w){
    var _html='<div style="line-height: 30px;text-align: center;">正在为您载入数据,请稍后……</div><div id="jsLoadOuter" style="width:250px;height:8px;border:#6BAAC9 solid 1px; background:#C0EBFF; margin:0 auto;box-shadow: 0 0 3px #2E94BB;padding:1px"><div id="jsLoadInner" style="background:#54AEE0;height:100%;width:0"></div></div>';
    var __g;
    var _maxWidth=100;
    var _nowWidth=0;
    var _speed=30;
    var _step=2;
    var __time;
    progress={
      render:function(fn){
        fn&&fn(_html);
        _nowWidth=0;
        __g=document.getElementById('jsLoadInner');
        this.fx();
      },
      complete:function(fn){
        clearTimeout(__time);
        progress.completeFn=fn;
        this.setOver();
      },     
      setOver:function(){
        var _stepa=_step*1.5;
        if(_nowWidth<_maxWidth){
          _nowWidth=_nowWidth-0+_stepa;
          parseInt(_nowWidth)>parseInt(_maxWidth)?_nowWidth=_maxWidth:'';
          __g.style.width=''+_nowWidth+'%';
          _speed=(_maxWidth-_nowWidth)/1000;
          __time=setTimeout('progress.setOver()',_speed) ;
        }else{
          clearTimeout(__time);
          progress.completeFn&&progress.completeFn();
        };
      },
      fx:function(){
        var _stepa=_step;
        if(_nowWidth<_maxWidth-5){
          _stepa=_nowWidth>_maxWidth*0.6?(_stepa*0.02):_stepa;
          _nowWidth=_nowWidth-0+_stepa;
          parseInt(_nowWidth)>parseInt(_maxWidth)?_nowWidth=_maxWidth:'';
          __g.style.width=''+_nowWidth+'%';
          __time=setTimeout('progress.fx()',_speed);
        }else{
          clearTimeout(__time);
        };
      }
    }
    w.progress=progress;
  })(window)
  //
  $(function(){
    showLoading();
    $('body')
    .on('click','#starLoading',function(){
      showLoading();         
    })       
  })
  function showLoading(){
    //开始显示进度条
    progress.render(function(html){
        art.dialog({id:"jsLoadingDialog",title:"\u6b63\u5728\u52a0\u8f7d\u4e2d\u2026\u2026",cancel:!1,lock:!0,background:"#fff",fixed:!0,content:html});
    }); 
    //请求完成后完成进度条,,,模拟10秒后请求完成
    setTimeout(function(){
      progress.complete(function(html){
        art.dialog.list['jsLoadingDialog']&&art.dialog.list['jsLoadingDialog'].close();
        $('#msgHtml').html('进度条已走完');
      });
    },10000);    
  };
</script>

运行效果如下图所示:

jquery模拟进度条实现方法

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript浏览器选项卡效果
Aug 25 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
antd form表单数据回显操作
Nov 02 Javascript
js实现圆盘记速表
Aug 03 #Javascript
包含中国城市的javascript对象实例
Aug 03 #Javascript
jQuery跨域问题解决方案
Aug 03 #Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 #Javascript
提高jQuery性能优化的技巧
Aug 03 #Javascript
jquery简单实现幻灯片的方法
Aug 03 #Javascript
JS拖拽插件实现步骤
Aug 03 #Javascript
You might like
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
JS继承 笔记
2011/07/13 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
python检测远程udp端口是否打开的方法
2015/03/14 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
python 除法保留两位小数点的方法
2018/07/16 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
公务员职务工作的自我评价
2013/11/01 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
迟到检讨书800字
2014/01/13 职场文书
家长对小学生的评语
2014/01/28 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
承诺书范本大全
2015/05/04 职场文书
校园广播稿范文
2015/08/19 职场文书
python元组打包和解包过程详解
2021/08/02 Python
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python