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

2019-11-20 11:23:48

字体：大中小

来源：转载

供稿：网友

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/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?";}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程序设计有所帮助。

上一篇：jquery实现的V字形显示效果代码

下一篇：基于Jquery+div+css实现弹出登录窗口(代码超简单)