jquery模拟进度条实现方法

2019-11-20 11:56:31

字体：大中小

来源：转载

供稿：网友

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

<!doctype html><html><head><meta charset="utf-8"><title>js模拟进度条练习</title><script type='text/javascript' src="http://xiazai.VeVB.COm/201508/yuanma/jquery-1.8.0.min.js"></script><script type='text/javascript' src='http://xiazai.VeVB.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">//www.VeVB.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>

运行效果如下图所示：