Recientemente creé una página web de configuración simple. Debido a que necesitaba reiniciar la función del dispositivo, quería agregarle una interfaz emergente de cuenta regresiva.
La idea inicial era personalizar una ventana emergente de alerta, pero pronto descubrí que la alerta siempre permanecería allí esperando la confirmación del clic, en lugar del efecto de visualización automática y continua que quería.
Más tarde, pensé que sería posible mostrar y ocultar directamente ventanas emergentes creadas a partir de DIV. Partiendo de esta idea tenemos lo siguiente:
Veamos primero las representaciones:
Mire el código fuente nuevamente:
Copie el código de código de la siguiente manera:
<!------------------ Ventana emergente de preparación de operación de reinicio--------------->
<div id="reboot_pre">
<div><b>Preparando</b></div>
<br /><br />
<div><p style="margin-left:50px">Estamos trabajando arduamente para prepararlo para la operación de reinicio... Tomará <span id="reboot_pre_time">4</span> segundos</p> </div>
<br />
<div><button type="button" onclick="reboot_cancel()">Cancelar</button></div>
</div>
<!------------------ Ventana emergente de preparación de operación de reinicio--------------->
<!------------------ Reinicie la operación para que aparezca la ventana--------------->
<div id="reboot_ing">
<div><b>En progreso</b></div>
<br />
<div><p style="margin-left:40px">Reiniciar la operación en curso... Tardará <span id="reboot_ing_time">14</span> segundos</p></div>
<br />
<div id="progress_reboot" style="margin-left:40px;color:#00DB00;font-family:Arial;font-weight:bold;height:18px">|</div>
<br />
</div>
<!------------------ Reinicie la operación para que aparezca la ventana--------------->
lt;tipo de script="texto/javascript">
var cancelar_flag = 0;
var ya = 0;
/* Operaciones realizadas tan pronto como se carga la página web*/
ventana.onload = reiniciar();
/* Haga clic en la operación del botón de reinicio*/
reinicio de función(){
if(confirm("Esta operación desconectará todas las conexiones actuales y reiniciará su dispositivo. ¿Está seguro de que desea continuar?")){
document.getElementById("reboot_pre_time").innerHTML = 4;
document.getElementById("reboot_ing_time").innerHTML = 14;
document.all.progress_reboot.innerHTML = "|";
descargar_flag = 0;
cancelar_flag = 0;
ya = 0;
setTimeout("showDiv('reboot_pre')",500);
delayPre_reboot("reboot_pre_time");
}
}
/* Reinicia la ventana emergente de preparación durante 5 segundos*/
función retardoPre_reboot(cadena) {
si(!cancel_flag){
var retraso = document.getElementById(str).innerHTML;
si(retraso > 0) {
demora--;
document.getElementById(str).innerHTML = retraso;
setTimeout("delayPre_reboot('reboot_pre_time')", 1000);
} demás {
hideDiv("reboot_pre");
setTimeout("showDiv('reboot_ing')",500);
delayDo_reboot("reboot_ing_time");
}
}
}
/* Reiniciar la ventana emergente en progreso durante 15 segundos*/
función retardoDo_reboot(str){
display_reboot(100);
var retraso = document.getElementById(str).innerHTML;
si(retraso > 0) {
demora--;
document.getElementById(str).innerHTML = retraso;
setTimeout("delayDo_reboot('reboot_ing_time')", 1000);
} demás {
hideDiv("reboot_ing");
alert("¡Reinicio exitoso!");
}
}
/* Evento del botón cancelar al prepararse para reiniciar*/
función reiniciar_cancelar(){
cancelar_flag = 1;
hideDiv("reboot_pre");
alert("¡Has cancelado exitosamente la operación de reinicio!");
}
/* Mostrar ventana emergente */
función mostrarDiv (cadena){
document.getElementById(str).style.visibility = "visible";
}
/*Ocultar ventana emergente*/
función ocultarDiv (cadena){
document.getElementById(str).style.visibility = "oculto";
}
/* Reinicia el tiempo de la ventana emergente en progreso y mueve la barra de búfer*/
función display_reboot(max){
ya++;
var dispObj = document.all.progress_reboot;
dispObj.style.width = 100.0*ya/max+"px";
document.all.progress_reboot.innerHTML += "|||||";
var temporizador = window.setTimeout("display("+max+")",1000);
si (ya >= máximo){
ventana.clearTimeout(temporizador);
}
}
</script>