信鸽网

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

  作者：bea

本文实例讲述了JS基于Ajax实现的网页Loading效果代码。分享给大家供大家参考，具体如下： 这是一款很不错的网页Loading效果，常用于Ajax交互式网页设计中，点击按钮即可弹出Loading框，若Loading框未加载完成时关闭网页，会弹出确认提示框，用于一些对安全性能要求高的网页交互处理中，比如付款操作。 运行效果截图如下： 在线演示地址如下： http://demo./js/2015/js-ajax-web-loading-style-codes/ 具体代码如

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


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


运行效果截图如下：



在线演示地址如下：


http://demo./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.

Are 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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: