JavaScript implementation simple countdown pop-up window DEMO _ javascript skills

To make a simple webpage configuration, You need to restart the device function, so you want to add a countdown pop-up window above. The following is a specific implementation, you can refer to the following simple settings page recently. to restart the device function, you want to add a countdown window on it.

The idea was to customize an alert pop-up window, but soon it was found that alert will remain there waiting for confirmation, rather than the auto-continuous display I wanted.

Later, we thought of directly displaying and hiding the pop-up window made by DIV. Based on this idea, we have the following:

First look:


Let's look at the source code:

The Code is as follows:

Preparing

Trying to prepare a restart operation for you... four seconds later

Cancel

In progress

Restarting... 14 seconds later

|

Lt; script type = "text/javascript">

Var cancel_flag = 0;
Var already = 0;

/* Operations performed when a webpage is loaded */
Window. onload = reboot ();

/* Click the restart button */
Function reboot (){
If (confirm ("this operation will disconnect all existing 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 and prepare a 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 _ in')", 500 );
DelayDo_reboot ("reboot_ing_time ");
}
}
}
/* Restart the window 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 ("reboot successful! ");
}
}
/* Restart the event of canceling the button during preparation */
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 the pop-up window */
Function hideDiv (str ){
Document. getElementById (str). style. visibility = "hidden ";
}

/* Restart the window to display the timer 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