suchen

Heim >Web-Frontend >js-Tutorial >JQuery-Simulation Fortschrittsbalken Implementierung method_jquery

JQuery-Simulation Fortschrittsbalken Implementierung method_jquery

WBOY
WBOYOriginal
2016-05-16 15:47:511143Durchsuche

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode des Fortschrittsbalkens der JQuery-Simulation. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt: 

<!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>

Der Betriebseffekt ist wie folgt:

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript verwendet die Post-Methode, um Daten zu übermitteln. Instanz_Javascript-FähigkeitenNächster Artikel：Javascript verwendet die Post-Methode, um Daten zu übermitteln. Instanz_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen