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 相关文章推荐
javascipt基础内容--需要注意的细节
Apr 10 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
React实现todolist功能
Dec 28 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
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
用javascript实现自定义标签
2007/05/08 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
python使用cookielib库示例分享
2014/03/03 Python
python同时给两个收件人发送邮件的方法
2015/04/30 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
在Python中增加和插入元素的示例
2018/11/01 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
高三自我评价
2014/02/01 职场文书
年终总结会议主持词
2014/03/17 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
民事调解协议书
2016/03/21 职场文书
mysql知识点整理
2021/04/05 MySQL
Python 视频画质增强
2022/04/28 Python
Python如何将list中的string转换为int
2022/07/15 Ruby