Recentemente, criei uma página de configurações simples. Como precisava reiniciar a função do dispositivo, queria adicionar uma interface pop-up de contagem regressiva a ela.
A ideia inicial era personalizar uma janela pop-up de alerta, mas logo descobri que o alerta ficaria sempre ali aguardando a confirmação do clique, ao invés do efeito de exibição automática e contínua que eu desejava.
Mais tarde, pensei que seria possível exibir e ocultar diretamente janelas pop-up feitas a partir de DIVs. Com base nesta ideia, temos o seguinte:
Vejamos primeiro as renderizações:
Observe o código-fonte novamente:
Copie o código do código da seguinte forma:
<!----------------- Janela pop-up de preparação da operação de reinicialização--------------->
<div id="reboot_pre">
<div><b>Preparação</b></div>
<br /><br />
<div><p style="margin-left:50px">Estamos trabalhando duro para prepará-lo para a operação de reinicialização... Isso levará <span id="reboot_pre_time">4</span> segundos</p> </div >
<br />
<div><button type="button" onclick="reboot_cancel()">Cancelar</button></div>
</div>
<!----------------- Janela pop-up de preparação da operação de reinicialização--------------->
<!----------------- Reinicie a operação para abrir a janela--------------->
<div id="reboot_ing">
<div><b>Em andamento</b></div>
<br />
<div><p style="margin-left:40px">Reiniciar operação em andamento... Levará <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 a operação para abrir a janela--------------->
lt;script type="text/javascript">
var cancel_flag = 0;
var já = 0;
/* Operações realizadas assim que a página web é carregada*/
janela.onload = reiniciar();
/* Clique na operação do botão reiniciar*/
função reiniciar(){
if(confirm("Esta operação desconectará todas as conexões atuais e reiniciará seu dispositivo. Tem certeza de que deseja continuar?")){
document.getElementById("reboot_pre_time").innerHTML = 4;
document.getElementById("reboot_ing_time").innerHTML = 14;
document.all.progress_reboot.innerHTML = "|";
sinalizador_download = 0;
cancelar_flag = 0;
já = 0;
setTimeout("showDiv('reboot_pre')",500);
delayPre_reboot("reboot_pre_time");
}
}
/* Reinicia a janela pop-up de preparação por 5 segundos*/
função atrasoPre_reboot(str) {
if(!cancel_flag){
var atraso = document.getElementById(str).innerHTML;
if(atraso > 0) {
atraso--;
document.getElementById(str).innerHTML = atraso;
setTimeout("delayPre_reboot('reboot_pre_time')", 1000);
} outro {
hideDiv("reboot_pre");
setTimeout("showDiv('reboot_ing')",500);
delayDo_reboot("reboot_ing_time");
}
}
}
/* Reinicia a janela pop-up em andamento por 15 segundos*/
função delayDo_reboot(str){
display_reboot(100);
var atraso = document.getElementById(str).innerHTML;
if(atraso > 0) {
atraso--;
document.getElementById(str).innerHTML = atraso;
setTimeout("delayDo_reboot('reboot_ing_time')", 1000);
} outro {
hideDiv("reboot_ing");
alert("Reinicialização com sucesso!");
}
}
/* Evento de botão cancelar ao preparar para reiniciar*/
função reboot_cancel(){
cancelar_flag = 1;
hideDiv("reboot_pre");
alert("Você cancelou com sucesso a operação de reinicialização!");
}
/* Exibe janela pop-up */
função mostrarDiv (str){
document.getElementById(str).style.visibility = "visível";
}
/*Ocultar janela pop-up*/
função ocultarDiv (str){
document.getElementById(str).style.visibility = "oculto";
}
/* Reinicie o tempo da janela pop-up em andamento e mova a barra de buffer*/
função display_reboot(máx.){
já++;
var dispObj = document.all.progress_reboot;
dispObj.style.width = 100,0*já/max+"px";
document.all.progress_reboot.innerHTML += "|||||";
var temporizador = window.setTimeout("display("+max+")",1000);
if (já >= max){
janela.clearTimeout(temporizador);
}
}
</script>