欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jquery模拟进度条实现方法_jquery

程序员文章站 2022-04-21 22:04:56
...
本文实例讲述了jquery模拟进度条实现方法。分享给大家供大家参考。具体如下:


js模拟进度条练习
http://www.jb51.net
'; 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>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); };