Home > Article > Web Front-end > jquery simulation progress bar implementation method_jquery

jquery simulation progress bar implementation method_jquery

WBOYOriginal: 2016-05-16 15:47:511071browse

The example in this article describes the implementation method of jquery simulation progress bar. Share it with everyone for your reference. The details are as follows:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js模拟进度条练习</title>
<script type='text/javascript' src="http://xiazai.jb51.net/201508/yuanma/jquery-1.8.0.min.js"></script>
<script type='text/javascript' src='http://xiazai.jb51.net/201508/yuanma/jquery.artDialog.js&#63;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">http://www.jb51.net</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)&#63;_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&#63;(_stepa*0.02):_stepa;
          _nowWidth=_nowWidth-0+_stepa;
          parseInt(_nowWidth)>parseInt(_maxWidth)&#63;_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>

The operation effect is as shown below:

I hope this article will be helpful to everyone’s jquery programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Javascript uses post method to submit data instance_javascript skillsNext article：Javascript uses post method to submit data instance_javascript skills

See more

jquery simulation progress bar implementation method_jquery

Related articles