JavaScript 實作簡單的倒數計時彈窗DEMO附圖_javascript技巧

最近做一個簡單的設定網頁，因為需要重新啟動設備功能，於是就想在上面加上一個倒數計時彈窗的介面。

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

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

先看效果圖：
 
 
再看原始碼：

複製程式碼 程式碼如下:

準備中

正在努力為您準備重啟操作... 還需稍候4 秒

取消

進行中

重新啟動操作進行中... 也需稍候14 秒

|

lt;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.promress_reML. ;
download_flag = 0;
cancel_flag = 0;
already = 0;
setTimeout("showDiv('reboot_pre')",500);
delayayPreboot(Dayay" 🎜>}
}
/* 重啟準備彈窗計時5秒*/
function delayPre_reboot(str) {
if(!cancel_flag){
var delay = document.getElementBycancel_flag){
var delay = document. ).innerHTML;
if(delay > 0) {
delay--;
document.getElementById(str).innerHTML = delay;
setTimeout("delayPre_reboot('reboot_pre_time'reboot_pre_time)" );
} else {
hideDiv("reboot_pre");
setTimeout("showDiv('reboot_ing')",500);
delayDo_reboot("reboot_ing_time"); 🎜>}
}
/* 重新啟動進行中彈窗計時15秒*/
function delayDo_reboot(str){
display_reboot(100);
var delay = strument.Elementb = document. ).innerHTML;
if(delay > 0) {
delay--;
document.getElementById(str).innerHTML = delay;
setTimeout("delayDo_reboot('reboot_ing_time'reboot_ing_time')" );
} 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
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);
}
}