JavaScript implementation of a simple countdown popover DEMO attached
- 2020-03-30 02:16:29
- OfStack
Recently I made a simple setup page, because I need to restart the device function, so I want to add a countdown popup interface on it.
The initial idea was to customize an alert popover, but it quickly became clear that the alert would sit there waiting for a confirmation click, rather than the auto-sequential display I wanted.
Later, just think of directly show and hide DIV made into a popover, you can achieve. Based on this idea, the following:
First look at the renderings:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/201403051647112.gif? 201425164738 ">
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/201403051648023.gif? 201425164814 ">
Look at the source code:
The initial idea was to customize an alert popover, but it quickly became clear that the alert would sit there waiting for a confirmation click, rather than the auto-sequential display I wanted.
Later, just think of directly show and hide DIV made into a popover, you can achieve. Based on this idea, the following:
First look at the renderings:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/201403051647112.gif? 201425164738 ">
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/201403051648023.gif? 201425164814 ">
Look at the source code:
<!------------------ Restart the operating Prepare the pop-up --------------->
<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> In the preparation </b></div>
<br /><br />
<div><p style="margin-left:50px"> Efforts are under way to prepare the restart operation for you ... Still need to wait for a while <span id="reboot_pre_time">4</span> seconds </p></div>
<br />
<div><button type="button" style="width:70px; height:30px; margin-left:340px" onclick="reboot_cancel()"> cancel </button></div>
</div>
<!------------------ Restart the operating Prepare the pop-up --------------->
<!------------------ Restart the operating For Windows --------------->
<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> ongoing </b></div>
<br />
<div><p style="margin-left:40px"> The restart operation is in progress ... Still need to wait for a while <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 operating For Windows --------------->
lt;script type="text/javascript">
var cancel_flag = 0;
var already = 0;
window.onload = reboot();
function reboot(){
if(confirm(" This action 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");
}
}
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");
}
}
}
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 successfully! ");
}
}
function reboot_cancel(){
cancel_flag = 1;
hideDiv("reboot_pre");
alert(" You have successfully canceled the restart operation! ");
}
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>