很不错的网页Ajax Loading效果 [JS+HTML]

2014-08-18 05:36:45 -0400

代码演示

代码复制

</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="点击看看吧！" onclick="startLongProcess();">

<div style="border-top-color: buttonhighlight; border-right-color: buttonhighlight; border-bottom-color: buttonhighlight; border-left-color: buttonhighlight; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: outset; border-right-style: outset; border-bottom-style: outset; border-left-style: outset; border-image: initial; font-size: 8pt; z-index: 4; font-family: Tahoma; position: absolute; background-color: buttonface; width: 350px; cursor: default; left: -1.5px; top: 222.5px; display: none; " 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-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; height: 13px; width: 327.6px; "></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>


<div id="divModal" style="background-color: white; left: 0px; position: absolute; top: 0px; z-index: 3; width: 0px; height: 0px; " onclick="window.event.cancelBubble=true; window.event.returnValue=false;">
</div>

«Newer Older»

----Comments(1)----
【飛龍在天】 (@891622172) | @ at 2014-08-18 06:26:
进度条？不错

Back to home

Subscribe | Register | Login | N