jQuery简单实现提交数据出现loading进度条的方法


Posted in Javascript onMarch 29, 2016

本文实例讲述了jQuery简单实现提交数据出现loading进度条的方法。分享给大家供大家参考,具体如下:

html部分代码如下,复制然后引入类库即可使用

<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><!--自己下载类库-->
<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程序设计有所帮助。

Javascript 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 #Javascript
AngularJS directive返回对象属性详解
Mar 28 #Javascript
Boostrap模态窗口的学习小结
Mar 28 #Javascript
理解javascript模块化
Mar 28 #Javascript
谈一谈jQuery核心架构设计
Mar 28 #Javascript
javascript函数自动执行常用方法汇总
Mar 28 #Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 #Javascript
You might like
PHP 判断变量类型实现代码
2009/10/23 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
初学Javascript的一些总结
2008/11/03 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
Linux常见面试题
2013/03/18 面试题
思想品德自我鉴定
2013/10/12 职场文书
师范应届毕业生自荐信
2013/11/18 职场文书
教师自荐信范文
2013/12/09 职场文书
办公室前台的岗位职责
2013/12/20 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
论文指导教师评语
2014/04/28 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
学习心理学心得体会
2016/01/22 职场文书
商业计划书格式、范文
2019/03/21 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL