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">//m.survivalescaperooms.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>

運行效果如下圖所示：