JavaScript 實現簡單的倒計時彈窗DEMO

最近做一個簡單的設置網頁，因爲需要重啓設備功能，於是就想在上面加一個倒計時彈窗的界面。

剛開始的想法是自定義一個alert彈窗，但很快就發現，alert會一直停在那裏等待點擊確認，而不是我想要的那種自動連續顯示的效果。

後來，纔想到直接顯示和隱藏DIV製作成的彈窗，就可以實現了。基於這個思路，於是有了下面的： 

 先看效果圖：

再看源代碼：

	<!------------------  重啓操作 準備彈窗 --------------->
		<div id="reboot_pre" style="width: 450px; height: 200px; margin-left:auto; margin-right:auto; margin-top:200px; visibility:hidden; background: #F0F0F0; border:1px solid #00DB00; z-index:9999">
			<div style="width: 450px; height: 30px; background:#00DB00; line-height:30px;text-align: center;"><b>準備中</b></div>
			<br /><br />
			<div><p style="margin-left:50px">正在努力爲您準備重啓操作...   還需稍候 <span id="reboot_pre_time">4</span> 秒</p></div>
			<br />
			<div><button type="button" style="width:70px; height:30px; margin-left:340px" onclick="reboot_cancel()">取消</button></div>
		</div>
		<!------------------  重啓操作 準備彈窗 --------------->

		<!------------------  重啓操作 進行彈窗 --------------->
		<div id="reboot_ing" style="width: 450px; height: 150px;  margin-left:auto; margin-right:auto; margin-top:-150px; visibility: hidden; background: #F0F0F0; border:1px solid #00DB00">
			<div style="width: 450px; height: 30px; background:#00DB00; line-height:30px;text-align: center;"><b>進行中</b></div>
			<br />
			<div><p style="margin-left:40px">重啓操作正在進行中...   還需稍候 <span id="reboot_ing_time">14</span> 秒</p></div>
			<br />
			<div  id="progress_reboot" style="margin-left:40px;color:#00DB00;font-family:Arial;font-weight:bold;height:18px">|</div>
			<br />
		</div>
		<!------------------  重啓操作 進行彈窗 --------------->


<script type="text/javascript">
				
				var cancel_flag = 0;
				var already = 0;

				/* 網頁一加載就執行的操作 */
				window.onload = reboot();

				/* 重啓按鈕的單擊操作 */
				function reboot(){
					if(confirm("這個操作會斷開現在所有的連接，並且重新啓動您的設備，確定要繼續操作嗎？")){
						document.getElementById("reboot_pre_time").innerHTML = 4;
						document.getElementById("reboot_ing_time").innerHTML = 14;
						document.all.progress_reboot.innerHTML = "|";
						download_flag = 0;
						cancel_flag = 0;
						already = 0;
						setTimeout("showDiv('reboot_pre')",500);
						delayPre_reboot("reboot_pre_time");
					}
				}
				/* 重啓準備彈窗計時 5秒 */
				function delayPre_reboot(str) {
					if(!cancel_flag){
						var delay = document.getElementById(str).innerHTML;
						if(delay > 0) {
							delay--;
							document.getElementById(str).innerHTML = delay;
							setTimeout("delayPre_reboot('reboot_pre_time')", 1000);
						} else {
							hideDiv("reboot_pre");
							setTimeout("showDiv('reboot_ing')",500);
							delayDo_reboot("reboot_ing_time");
						}
					}
				}
				/* 重啓進行中彈窗計時 15秒 */
				function delayDo_reboot(str){
					display_reboot(100);
					var delay = document.getElementById(str).innerHTML;
					if(delay > 0) {
						delay--;
						document.getElementById(str).innerHTML = delay;
						setTimeout("delayDo_reboot('reboot_ing_time')", 1000);
					} else {
						hideDiv("reboot_ing");
						alert("重啓成功！");
					}
				}
				/* 重啓準備時 取消按鈕的事件*/
				function reboot_cancel(){
					cancel_flag = 1;
					hideDiv("reboot_pre");
					alert("您已經成功取消了重啓操作！");
				}
				/* 顯示彈窗 */
				function showDiv (str){
					document.getElementById(str).style.visibility = "visible";
				}
				/* 隱藏彈窗 */
				function hideDiv (str){
					document.getElementById(str).style.visibility = "hidden";
				}

				/* 重啓進行中彈窗計時，緩衝條的移動*/
				function display_reboot(max){
					 already++;
					 var dispObj = document.all.progress_reboot;
					 dispObj.style.width = 100.0*already/max+"px";
					 document.all.progress_reboot.innerHTML += "|||||";
					 var timer = window.setTimeout("display("+max+")",1000);
					 if (already >= max){
						window.clearTimeout(timer);
					 }
				}
				 
		</script>