JavaScript implémente une simple fenêtre contextuelle de compte à rebours DEMO avec des compétences en images_javascript

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 pop-up 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 :

Regardez d'abord le rendu :


Regardez ensuite le code source :

lt;script type="text/javascript">

var Cancel_flag = 0;
var déjà = 0; >/* Opération effectuée dès le chargement de la page web*/
window.onload = reboot();

/* Cliquer sur le bouton de redémarrage*/
function reboot(){
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;
cancel_flag = 0;
déjà = 0;
setTimeout("showDiv('reboot_pre')",500); 🎜>}
}
/* Minuterie la fenêtre contextuelle de préparation du redémarrage pendant 5 secondes*/
function delayPre_reboot(str) {
if(!cancel_flag){
var delay = document .getElementById(str ).innerHTML;
if(delay > 0) {
delay--;
document.getElementById(str).innerHTML =
setTimeout("delayPre_reboot('reboot_pre_time; ')", 1000);
} else {
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*/
function delayDo_reboot(str){
display_reboot(100);
var); delay = document.getElementById( str).innerHTML;
if(delay > 0) {
delay--;
document.getElementById(str).innerHTML =
setTimeout("delayDo_reboot; ("reboot_ing_time')" , 1000);
} else {
hideDiv("reboot_ing");
alert("Redémarrez avec succès ! ");
}
}
/* Événement du bouton d'annulation lors de la préparation du redémarrage*/
function reboot_cancel(){
cancel_flag = 1;
hideDiv("reboot_pre");
alert("Vous avez réussi à annuler l'opération de redémarrage !");
}
/* Afficher la fenêtre pop-up*/
function showDiv (str){
document.getElementById(str ). style.visibility = "visible";
}
/* Masquer la fenêtre pop-up*/
function hideDiv (str){
document.getElementById(str).style.visibility = " caché";
}

/* Redémarrer la synchronisation de la fenêtre contextuelle et le mouvement de la barre tampon*/
function display_reboot(max){
déjà;
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 (déjà >= max){
window.clearTimeout(timer);
}
}