JS編寫進度條形式的下載效果

2012/11/9 15:58:45作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

JS編寫進度條形式的下載效果

【實例描述】

在網(wǎng)頁中加載數(shù)據(jù)或下載文件時，鑒于帶寬問題可能需要經(jīng)過一定的等待時間，此時可以提供一個加載或下載進度條提示用戶等待時間。本例將學(xué)習(xí)如何制作一個下載進度條。

【實例代碼】

<html>
<head>
<title>無標題文檔-學(xué)無憂（wangbatian.cn）</title>
<SCRIPT language="javascript">
var NUMBER_OF_REPETITIONS = 40;
var nRepetitions = 0;
var g_oTimer = null;
//開始下載的方法
function startLongProcess()
{
   divProgressDialog.style.display = "";
   resizeModal();
   btnCancel.focus();
   // 設(shè)置窗口為大小可更改模式
   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";
   // 移除窗體事件
   window.onresize = null;
   window.onbeforeunload = null;
   nRepetitions = 0;
}
//判斷進度是否執(zhí)行完畢的方法
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 "有一個應(yīng)用程序正在運行，是否確定要退出";
}
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>
</head>
<BODY STYLE="FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica">
<INPUT TYPE="BUTTON" VALUE="開始下載" onclick="startLongProcess();">
<!-- 開始下載 -->
<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>
<!-- 結(jié)束下載 -->
<!-- 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>

【運行效果】

進度條形式的下載效果運行效果

【難點剖析】

本例的重點是如何判斷進度條的進度，其中使用了語句“1 00 * nRepetitionS／NUMBER_OF_REPETITIONS”?！皀Repetitions”變量相當于步長，在此處每增加一個進度“nRepetitions” 變量會自增 “1”。“NUMBER OF REPETITIONS”是一個常量，其值為“40”。

【源碼下載】

為了JS代碼的準確性，請點擊：JS編寫進度條形式的下載效果進行本實例源碼下載

標簽： JS編寫進度條效果