I recently made a simple settings web page. Because I needed to restart the device function, I wanted to add a countdown pop-up interface to it.
The initial idea was to customize an alert pop-up window, but I soon discovered that the alert would always stay there waiting for click confirmation, rather than the automatic and continuous display effect I wanted.
Later, I thought that it would be possible to directly display and hide pop-up windows made from DIVs. Based on this idea, we have the following:
Let’s look at the renderings first:
Look at the source code again:
Copy the code code as follows:
<!------------------ Restart operation preparation pop-up window--------------->
<div id="reboot_pre">
<div><b>Preparing</b></div>
<br /><br />
<div><p style="margin-left:50px">We are working hard to prepare you for the restart operation... It will take <span id="reboot_pre_time">4</span> seconds</p></div >
<br />
<div><button type="button" onclick="reboot_cancel()">Cancel</button></div>
</div>
<!------------------ Restart operation preparation pop-up window--------------->
<!------------------ Restart the operation to pop up the window--------------->
<div id="reboot_ing">
<div><b>In progress</b></div>
<br />
<div><p style="margin-left:40px">Restart operation in progress... It will take <span id="reboot_ing_time">14</span> seconds</p></div>
<br />
<div id="progress_reboot" style="margin-left:40px;color:#00DB00;font-family:Arial;font-weight:bold;height:18px">|</div>
<br />
</div>
<!------------------ Restart the operation to pop up the window--------------->
lt;script type="text/javascript">
var cancel_flag = 0;
var already = 0;
/* Operations performed as soon as the web page is loaded*/
window.onload = reboot();
/* Click operation of restart button*/
function reboot(){
if(confirm("This operation will disconnect all current connections and restart your device. Are you sure you want to continue?")){
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");
}
}
/* Restart preparation pop-up window for 5 seconds*/
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");
}
}
}
/* Restart pop-up window in progress for 15 seconds*/
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("Restart successful!");
}
}
/* Event of cancel button when preparing to restart*/
function reboot_cancel(){
cancel_flag = 1;
hideDiv("reboot_pre");
alert("You have successfully canceled the restart operation!");
}
/* Display pop-up window */
function showDiv (str){
document.getElementById(str).style.visibility = "visible";
}
/*Hide pop-up window*/
function hideDiv (str){
document.getElementById(str).style.visibility = "hidden";
}
/* Restart the pop-up window timing in progress and move the buffer bar*/
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>