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 相关文章推荐
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
JS求平均值的小例子
Nov 29 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 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 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
Prototype Template对象 学习
2009/07/19 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
javascript中的面向对象
2017/03/30 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
Python全排列操作实例分析
2018/07/24 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
Python __slots__的使用方法
2020/11/15 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
实习鉴定范文
2013/12/19 职场文书
教师岗位职责范本
2013/12/29 职场文书
通用自荐信范文
2014/03/14 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
建议书的格式
2014/05/12 职场文书
高三励志标语
2014/06/05 职场文书
先进工作者推荐材料
2014/12/23 职场文书
联村联户简报
2015/07/21 职场文书