JS基于Ajax实现的网页Loading效果代码


Posted in Javascript onOctober 27, 2015

本文实例讲述了JS基于Ajax实现的网页Loading效果代码。分享给大家供大家参考,具体如下:

这是一款很不错的网页Loading效果,常用于Ajax交互式网页设计中,点击按钮即可弹出Loading框,若Loading框未加载完成时关闭网页,会弹出确认提示框,用于一些对安全性能要求高的网页交互处理中,比如付款操作。

运行效果截图如下:

JS基于Ajax实现的网页Loading效果代码

在线演示地址如下:

具体代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>很不错的网页Ajax Loading效果</title>
</head>
<BODY STYLE="FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica">
<SCRIPT LANGUAGE="JScript">
var NUMBER_OF_REPETITIONS = 40;
var nRepetitions = 0;
var g_oTimer = null;
function startLongProcess()
{
  divProgressDialog.style.display = "";
  resizeModal();
  btnCancel.focus();
  window.onresize = resizeModal;
  window.onbeforeunload = showWarning;
  continueLongProcess();
}
function updateProgress(nNewPercent)
{
  divProgressInner.style.width = (parseInt(divProgressOuter.style.width)
   * nNewPercent / 100)+ "px";
}
function stopLongProcess()
{
  if (g_oTimer != null)
  {
   window.clearTimeout(g_oTimer);
   g_oTimer = null;
  }
  // Hide the fake modal DIV
  divModal.style.width = "0px";
  divModal.style.height = "0px";
  divProgressDialog.style.display = "none";
  // Remove our event handlers
  window.onresize = null;
  window.onbeforeunload = null;
  nRepetitions = 0;
}
function continueLongProcess()
{
  if (nRepetitions < NUMBER_OF_REPETITIONS)
  {
   var nTimeoutLength = Math.random() * 250;
   updateProgress(100 * nRepetitions / NUMBER_OF_REPETITIONS);
   g_oTimer = window.setTimeout("continueLongProcess();", nTimeoutLength);
   nRepetitions++;
  }
  else
  {
   stopLongProcess();
  }
}
function showWarning()
{
  return "Navigating to a different page or refreshing the window could cause you to lose precious data.\n\nAre you*absolutely* certain you want to do this?";
}
function resizeModal()
{
  divModal.style.width = document.body.scrollWidth;
  divModal.style.height = document.body.scrollHeight;
  divProgressDialog.style.left = ((document.body.offsetWidth -
divProgressDialog.offsetWidth) / 2);
  divProgressDialog.style.top = ((document.body.offsetHeight -
divProgressDialog.offsetHeight) / 2);
}
</SCRIPT>
<INPUT TYPE="BUTTON" VALUE="Click Me!" onclick="startLongProcess();">
<!-- BEGIN PROGRESS DIALOG -->
<DIV STYLE="BORDER: buttonhighlight 2px outset; FONT-SIZE: 8pt; Z-INDEX:
4; FONT-FAMILY: Tahoma; POSITION: absolute; BACKGROUND-COLOR: buttonface;
DISPLAY: none; WIDTH: 350px; CURSOR: default" ID="divProgressDialog"
onselectstart="window.event.returnValue=false;">
  <DIV STYLE="PADDING: 3px; FONT-WEIGHT: bolder; COLOR: captiontext;
BORDER-BOTTOM: white 2px groove; BACKGROUND-COLOR: activecaption">
   加载中……  </DIV>
  <DIV STYLE="PADDING: 5px">
   请稍等,网页正在处理中……
  </DIV>
  <DIV STYLE="PADDING: 5px">
   可能需要数秒钟.
  </DIV>
  <DIV STYLE="PADDING: 5px">
     <DIV ID="divProgressOuter" STYLE="BORDER: 1px solid threedshadow;
WIDTH: 336px; HEIGHT: 15px">
      <DIV ID="divProgressInner" STYLE="COLOR: white; TEXT-ALIGN:
center; BACKGROUND-COLOR: infobackground; MARGIN: 0px; WIDTH: 0px; HEIGHT:
13px;"></DIV>
     </DIV>
  </DIV>
  <DIV STYLE="BORDER-TOP: white 2px groove; PADDING-BOTTOM: 5px; PADDING-TOP: 3px;
BACKGROUND-COLOR: buttonface; TEXT-ALIGN: center">
     <INPUT STYLE="FONT-FAMILY: Tahoma; FONT-SIZE: 8pt" TYPE="button"
ID="btnCancel" onclick="stopLongProcess();" VALUE="取消">
  </DIV>
</DIV>
<!-- END PROGRESS DIALOG -->
<!-- BEGIN FAKE MODAL DIV-->
<DIV ID="divModal"
  STYLE="BACKGROUND-COLOR: white; FILTER: alpha(opacity=75); LEFT: 0px; POSITION:
 absolute; TOP: 0px; Z-INDEX: 3"
  onclick="window.event.cancelBubble=true; window.event.returnValue=false;">
</DIV>
<!-- END FAKE MODAL DIV -->
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js获取div高度的代码
Aug 09 Javascript
javascript 面向对象编程基础:继承
Aug 21 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 #Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 #Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 #Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 #Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 #Javascript
jQuery无刷新分页完整实例代码
Oct 27 #Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 #Javascript
You might like
php print EOF实现方法
2009/05/21 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
Sea.JS知识总结
2016/05/05 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
Python3实现生成随机密码的方法
2014/08/23 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
python使用Tesseract库识别验证
2018/03/21 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
机电专业毕业生推荐信
2013/11/10 职场文书
培训主管的岗位职责
2013/11/23 职场文书
应用英语专业自荐信
2014/01/26 职场文书
销售会计岗位职责
2014/03/15 职场文书
专业技术职务聘任书
2014/03/29 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
预备党员群众意见
2015/06/01 职场文书