首页 web前端 js教程 JS基于Ajax实现的网页Loading效果代码_javascript技巧

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

May 16, 2016 pm 03:34 PM
ajax js loading

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

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

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-ajax-web-loading-style-codes/

具体代码如下:

<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&#63;";
}
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程序设计有所帮助。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

推荐:优秀JS开源人脸检测识别项目 推荐:优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计

解决jQuery AJAX请求遇到403错误的方法 解决jQuery AJAX请求遇到403错误的方法 Feb 20, 2024 am 10:07 AM

标题:解决jQueryAJAX请求出现403错误的方法及代码示例403错误是指服务器禁止访问资源的请求,通常会导致出现这个错误的原因是请求缺少权限或者被服务器拒绝。在进行jQueryAJAX请求时,有时候会遇到这种情况,本文将介绍如何解决这个问题,并提供代码示例。解决方法:检查权限:首先要确保请求的URL地址是正确的,同时验证是否有足够的权限来访问该资

解决jQuery AJAX请求403错误的方法 解决jQuery AJAX请求403错误的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一个流行的JavaScript库,用于简化客户端端的开发。而AJAX则是在不重新加载整个网页的情况下,通过发送异步请求和与服务器交互的技术。然而在使用jQuery进行AJAX请求时,有时会遇到403错误。403错误通常是服务器禁止访问的错误,可能是由于安全策略或权限问题导致的。在本文中,我们将讨论如何解决jQueryAJAX请求遭遇403错误

如何使用Ajax从PHP方法中获取变量? 如何使用Ajax从PHP方法中获取变量? Mar 09, 2024 pm 05:36 PM

使用Ajax从PHP方法中获取变量是Web开发中常见的场景,通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中,将介绍如何使用Ajax从PHP方法中获取变量,并提供具体的代码示例。首先,我们需要编写一个PHP文件来处理Ajax请求,并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码:

如何解决jQuery AJAX报错403的问题? 如何解决jQuery AJAX报错403的问题? Feb 23, 2024 pm 04:27 PM

如何解决jQueryAJAX报错403的问题?在开发网页应用程序时,经常会使用jQuery来发送异步请求。然而,有时候在使用jQueryAJAX时可能会遇到错误代码403,表示服务器禁止访问。这种情况通常是由服务器端的安全设置所导致的,但可以通过一些方法来解决这个问题。本文将介绍如何解决jQueryAJAX报错403的问题,并提供具体的代码示例。一、使

js和vue的关系 js和vue的关系 Mar 11, 2024 pm 05:21 PM

js和vue的关系:1、JS作为Web开发基石;2、Vue.js作为前端框架的崛起;3、JS与Vue的互补关系;4、JS与Vue的实践应用。

PHP 与 Ajax:创建动态加载内容的解决方案 PHP 与 Ajax:创建动态加载内容的解决方案 Jun 06, 2024 pm 01:12 PM

Ajax(异步JavaScript和XML)允许在不重新加载页面情况下添加动态内容。使用PHP和Ajax,您可以动态加载产品列表:HTML创建一个带有容器元素的页面,Ajax请求加载数据后将数据添加到该元素中。JavaScript使用Ajax通过XMLHttpRequest向服务器发送请求,从服务器获取JSON格式的产品数据。PHP使用MySQL从数据库查询产品数据,并将其编码为JSON格式。JavaScript解析JSON数据,并将其显示在页面容器中。点击按钮触发Ajax请求,加载产品列表。

JS 的 AI 时代来了! JS 的 AI 时代来了! Apr 08, 2024 am 09:10 AM

JS-Torch简介JS-Torch是一种深度学习JavaScript库,其语法与PyTorch非常相似。它包含一个功能齐全的张量对象(可与跟踪梯度),深度学习层和函数,以及一个自动微分引擎。JS-Torch适用于在JavaScript中进行深度学习研究,并提供了许多方便的工具和函数来加速深度学习开发。图片PyTorch是一个开源的深度学习框架,由Meta的研究团队开发和维护。它提供了丰富的工具和库,用于构建和训练神经网络模型。PyTorch的设计理念是简单和灵活,易于使用,它的动态计算图特性使

See all articles