Recently made a simple settings page, because you need to restart the device function, so I want to add a countdown to the window interface.
The idea at first was to customize an alert window, but soon found that alert would be parked there waiting for the click Confirmation instead of the automatic sequential display I wanted.
Later, just think of direct display and hide div made by the window, it can be achieved. Based on this idea, we have the following:
First look at the effect of the picture:
Then look at the source code:
Copy Code code as follows:
<!------------------restart operation ready for window--------------->
<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> Preparation </b></div>
<br/><br/>
<div><p style= "margin-left:50px" > is trying to restart the operation for you ... Wait <span id= "Reboot_pre_time" >4</span> sec </p></div>
<br/>
<div><button type= "button" style= "width:70px; height:30px; margin-left:340px "onclick=" Reboot_cancel () "> Cancel </button></div>
</div>
<!------------------restart operation ready for window--------------->
<!------------------restart operation for window--------------->
<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> in Progress </b></div>
<br/>
<div><p style= "margin-left:40px" > Restart operation in progress ... Wait <span id= "Reboot_ing_time" >14</span> sec </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 operation for window--------------->
Lt;script type= "Text/javascript" >
var cancel_flag = 0;
var already = 0;
/* Web page load on the operation to do * *
Window.onload = reboot ();
/* Click action for reboot button * *
function reboot () {
If confirm ("This operation disconnects all connections now and restarts 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");
}
}
/* Reboot Ready window Timer 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");
}
}
}
/* Reboot for 15 seconds for POP window timer * *
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 ("Reboot successful!") ");
}
}
/* The event to cancel the button when the reboot is ready * *
function Reboot_cancel () {
Cancel_flag = 1;
Hidediv ("Reboot_pre");
Alert ("You have successfully canceled the restart operation!") ");
}
/* Show window/*
function Showdiv (str) {
document.getElementById (str). style.visibility = "visible";
}
* * Hidden window
function Hidediv (str) {
document.getElementById (str). style.visibility = "hidden";
}
/* Restart for window timer, the Buffer bar movement * *
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>