jQuery簡單實現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進度條的方法

字號:


    本文實例講述了jQuery簡單實現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進度條的方法。分享給大家供大家參考,具體如下:
    html部分代碼如下,復(fù)制然后引入類庫即可使用
    <html>
    <head>
    <style type="text/css">
     #bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.2; opacity:.2; filter: alpha(opacity=70);}
     .loading{display: none; position: absolute; top: 50%; left: 50%; z-index:1002; }
     </style>
    </head>
    <body>
      <div id="bg"></div>
      <input type="button" value="Save" id="btnSave" name="btnSave" />
      <div><img src="loading.gif"></div>
    </body>
    </html>
    jQuery部分代碼如下:
    <script src="jquery-1.11.0.min.js" type="text/javascript"></script><!--自己下載類庫-->
    <script type="text/javascript">
    $(function(){
      $("#btnSave").click(function(){
        $("#bg,.loading").show();
        $.ajax({
          async:false,
          url:"time.php",
          type:"post",
          data:{},
          success:function(mes){
            $("#bg,.loading").show();
          }
        })
      })
    })
    </script>
    php代碼:
    for($i=0;$i<10000000;$i++){
    }
    希望本文所述對大家jQuery程序設(shè)計有所幫助。