J'ai récemment créé une page Web de paramètres simples. Parce que je devais redémarrer la fonction de l'appareil, je souhaitais y ajouter une interface contextuelle de compte à rebours.
L'idée initiale était de personnaliser une fenêtre contextuelle d'alerte, mais j'ai vite découvert que l'alerte resterait toujours là en attendant la confirmation du clic, plutôt que l'effet d'affichage automatique et continu que je souhaitais.
Plus tard, j'ai pensé qu'il serait possible d'afficher et de masquer directement les fenêtres pop-up créées à partir de DIV. En partant de cette idée, nous avons ce qui suit :
Regardons d'abord les rendus :
Regardez à nouveau le code source :
Copiez le code comme suit :
<!------------------ Fenêtre contextuelle de préparation de l'opération de redémarrage------------------->
<div id="reboot_pre">
<div><b>Préparation</b></div>
<br /><br />
<div><p style="margin-left:50px">Nous travaillons dur pour vous préparer à l'opération de redémarrage... Cela prendra <span id="reboot_pre_time">4</span> secondes</p> </div>
<br />
<div><button type="button" onclick="reboot_cancel()">Annuler</button></div>
</div>
<!------------------ Fenêtre contextuelle de préparation de l'opération de redémarrage------------------->
<!------------------ Redémarrez l'opération pour faire apparaître la fenêtre-------------->
<div id="reboot_ing">
<div><b>En cours</b></div>
<br />
<div><p style="margin-left:40px">Opération de redémarrage en cours... Cela prendra <span id="reboot_ing_time">14</span> secondes</p></div>
<br />
<div id="progress_reboot" style="margin-left:40px;color:#00DB00;font-family:Arial;font-weight:bold;height:18px">|</div>
<br />
</div>
<!------------------ Redémarrez l'opération pour faire apparaître la fenêtre-------------->
lt;script type="text/javascript">
var annuler_flag = 0;
var déjà = 0 ;
/* Opérations effectuées dès le chargement de la page web*/
window.onload = reboot();
/* Cliquer sur l'opération du bouton de redémarrage*/
fonction redémarrage(){
if(confirm("Cette opération déconnectera toutes les connexions actuelles et redémarrera votre appareil. Êtes-vous sûr de vouloir continuer ?")){
document.getElementById("reboot_pre_time").innerHTML = 4;
document.getElementById("reboot_ing_time").innerHTML = 14;
document.all.progress_reboot.innerHTML = "|";
download_flag = 0 ;
annuler_flag = 0 ;
déjà = 0 ;
setTimeout("showDiv('reboot_pre')",500);
delayPre_reboot("reboot_pre_time");
}
}
/* Redémarrez la fenêtre pop-up de préparation pendant 5 secondes*/
fonction delayPre_reboot(str) {
si(!cancel_flag){
var delay = document.getElementById(str).innerHTML;
si (délai > 0) {
retard--;
document.getElementById(str).innerHTML = délai ;
setTimeout("delayPre_reboot('reboot_pre_time')", 1000);
} autre {
hideDiv("reboot_pre");
setTimeout("showDiv('reboot_ing')",500);
delayDo_reboot("reboot_ing_time");
}
}
}
/* Redémarrage de la fenêtre pop-up en cours pendant 15 secondes*/
fonction delayDo_reboot(str){
display_reboot(100);
var delay = document.getElementById(str).innerHTML;
si (délai > 0) {
retard--;
document.getElementById(str).innerHTML = délai ;
setTimeout("delayDo_reboot('reboot_ing_time')", 1000);
} autre {
hideDiv("reboot_ing");
alert("Redémarrage réussi !");
}
}
/* Evénement du bouton d'annulation lors de la préparation du redémarrage*/
fonction reboot_cancel(){
annuler_flag = 1 ;
hideDiv("reboot_pre");
alert("Vous avez réussi à annuler l'opération de redémarrage !");
}
/* Afficher une fenêtre pop-up */
fonction showDiv (str){
document.getElementById(str).style.visibility = "visible";
}
/*Masquer la fenêtre pop-up*/
fonction hideDiv (str){
document.getElementById(str).style.visibility = "caché";
}
/* Redémarre le timing de la fenêtre pop-up en cours et déplace la barre tampon*/
fonction display_reboot(max){
déjà++;
var dispObj = document.all.progress_reboot ;
dispObj.style.width = 100,0*déjà/max+"px";
document.all.progress_reboot.innerHTML += "|||||";
var timer = window.setTimeout("display("+max+")",1000);
si (déjà >= max){
window.clearTimeout(minuterie);
}
}
</script>