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

更新時(shí)間：2016年03月29日 09:41:25 作者：藍(lán)色雨敏

這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進(jìn)度條的方法,涉及jQuery的ajax調(diào)用及頁(yè)面樣式操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery簡(jiǎn)單實(shí)現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進(jìn)度條的方法。分享給大家供大家參考，具體如下：

html部分代碼如下，復(fù)制然后引入類庫(kù)即可使用

<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 class="loading"><img src="loading.gif"></div>
</body>
</html>

jQuery部分代碼如下：

<script src="jquery-1.11.0.min.js" type="text/javascript"></script><!--自己下載類庫(kù)-->
<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++){
}

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

牛叉的Jquery——Jquery與DOM對(duì)象的互相轉(zhuǎn)換及DOM的三種操作
Jquery對(duì)象就是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象，jQuery對(duì)象是jQuery獨(dú)有的，其可以使用jQuery里的方法，本文給大家介紹Jquery對(duì)象就是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象，jQuery對(duì)象是jQuery獨(dú)有的，其可以使用jQuery里的方法。感興趣的朋友可以參考下
2015-10-10
jquery中有哪些api jQuery主要API
jquery有很多的API事件，本文小編給大家整理了jquery中最主要的API函數(shù)集合。
2017-11-11
Java中Timer的用法詳解
Timer是比較常用的工具類，用于按時(shí)間計(jì)劃執(zhí)行任務(wù)。這篇文章給大家介紹java中的timer的用法詳解，涉及到j(luò)ava timer相關(guān)知識(shí)學(xué)習(xí)，對(duì)本文感興趣的朋友可以參考下本篇文章
2015-10-10
jQuery實(shí)現(xiàn)簡(jiǎn)單彈出框效果實(shí)例
這篇文章主要給大家介紹了關(guān)于jQuery實(shí)現(xiàn)簡(jiǎn)單彈出框效果的相關(guān)資料,幾天一直在研究JQuery,確實(shí)很好用,有很多需求都是要彈出框,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
jQuery滾動(dòng)條插件nanoscroller使用指南
本文給大家介紹的nanoScrollerJS是一款使用簡(jiǎn)單方式實(shí)現(xiàn) Mac OS X Lion 系統(tǒng)滾動(dòng)條效果的jQuery插件。該滾動(dòng)條插件利用原生的滾動(dòng)條可以工作在 iPad、iPhone 和一些 Android Tablets上。
2015-04-04
jquery彩色投票進(jìn)度條簡(jiǎn)單實(shí)例演示
這篇文章向大家推薦了一個(gè)jquery彩色投票進(jìn)度條簡(jiǎn)單實(shí)例演示，詳細(xì)介紹了如何制作進(jìn)度條的步驟，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-11-11
JQueryEasyUI Layout布局框架的使用
本篇文章小編為大家介紹JQueryEasyUI Layout布局框架的使用，有需要的朋友可以參考一下
2013-04-04
jQuery+Datatables實(shí)現(xiàn)表格批量刪除功能【推薦】
這篇文章主要介紹了jQuery+Datatables實(shí)現(xiàn)表格批量刪除功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-10-10
jQuery包裹節(jié)點(diǎn)用法完整示例
這篇文章主要介紹了jQuery包裹節(jié)點(diǎn)用法,結(jié)合完整實(shí)例形式分析了jQuery中wrap方法包裹節(jié)點(diǎn)的使用技巧,注釋中還包含了wrapAll與wrapInner方法的使用,需要的朋友可以參考下
2016-09-09
改善你的jQuery的25個(gè)步驟千倍級(jí)效率提升
改善你的jQuery的25個(gè)步驟 -- 從頭看完會(huì)有無(wú)數(shù)收獲,千倍級(jí)效率提升
2010-02-02