JavaScript 實現(xiàn)簡單的倒計時彈窗DEMO附圖

更新時間：2014年03月05日 16:47:56 作者：

做一個簡單的設置網(wǎng)頁，因為需要重啟設備功能，于是就想在上面加一個倒計時彈窗的界面，下面是具體的實現(xiàn)，大家可以參考下

最近做一個簡單的設置網(wǎng)頁，因為需要重啟設備功能，于是就想在上面加一個倒計時彈窗的界面。

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

后來，才想到直接顯示和隱藏DIV制作成的彈窗，就可以實現(xiàn)了?；谶@個思路，于是有了下面的：

先看效果圖：

再看源代碼：

復制代碼代碼如下:

 
<!------------------ 重啟操作 準備彈窗 ---------------> 
<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> 
<!------------------ 重啟操作 進行彈窗 ---------------> 


lt;script type="text/javascript"> 

var cancel_flag = 0; 
var already = 0; 

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

/* 重啟按鈕的單擊操作 */ 
function reboot(){ 
if(confirm("這個操作會斷開現(xiàn)在所有的連接，并且重新啟動您的設備，確定要繼續(xù)操作嗎？")){ 
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("您已經(jīng)成功取消了重啟操作！"); 
} 
/* 顯示彈窗 */ 
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> 

您可能感興趣的文章:

JavaScript函數(shù)封裝的示例詳解
這篇文章主要通過動畫的示例來為大家詳細介紹一下JavaScript的函數(shù)封裝，文中的示例代碼講解詳細，感興趣的小伙伴可以學習一下
2022-03-03
用JS動態(tài)設置CSS樣式常見方法小結(推薦)
本文給大家總結了js動態(tài)設置css樣式的常見方法，非常實用，對js設置css樣式相關知識感興趣的朋友一起學習吧
2016-11-11
JavaScript數(shù)組reduce()方法?
這篇文章主要介紹了JavaScript數(shù)組reduce()方法，reduce()方法是處理數(shù)組的方法，它接收一個函數(shù)和一個初始值，然后將數(shù)組中的每個元素和初始值當作參數(shù)傳入這個函數(shù)中進行處理，最后返回和初始值相同類型的值,需要的朋友可以參考一下
2022-01-01
不同瀏覽器對回車提交表單的處理辦法
在瀏覽器中填寫表單的時，可以直接在“文本框”中敲擊“Enter”來提交表單，很是方便。
2010-02-02
Bootstrap Table使用整理(二)
這篇文章主要介紹了Bootstrap Table使用整理(二)的相關資料,需要的朋友可以參考下
2017-06-06
javascript當中的代碼嗅探擴展原生對象和原型(prototype)
如果不是有特殊需要而去擴展原生對象和原型（prototype）的做法是不好的,除非這樣做是值得的，例如，向一些舊的瀏覽器中添加一些ECMAScript5中的方法
2013-01-01
微信小程序動態(tài)綁定數(shù)據(jù)及動態(tài)事件處理
這篇文章主要介紹了微信小程序動態(tài)綁定數(shù)據(jù)及動態(tài)事件處理的相關資料,需要的朋友可以參考下
2017-03-03
JS封裝通過className獲取元素的函數(shù)示例
這篇文章主要介紹了JS封裝通過className獲取元素的函數(shù),涉及javascript針對頁面元素屬性的遍歷與數(shù)組相關操作技巧,需要的朋友可以參考下
2016-12-12
微信小程序多列選擇器range-key使用詳解
這篇文章主要為大家詳細介紹了微信小程序多列選擇器range-key的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
js實現(xiàn)一個簡單的MVVM框架示例
下面小編就為大家分享一篇js實現(xiàn)一個簡單的MVVM框架示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01