jquery模拟进度条实现方法

前端技术 2023/09/05 JavaScript

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

<!doctype html>
<html>
<head>
<meta charset=\"utf-8\">
<title>js模拟进度条练习</title>
<script type=\'text/javascript\' src=\"http://xiazai.phpstudy.net/201508/yuanma/jquery-1.8.0.min.js\"></script>
<script type=\'text/javascript\' src=\'http://xiazai.phpstudy.net/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\">http://www.phpstudy.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)?_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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/11895

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案