Ich habe kürzlich eine einfache Einstellungswebseite erstellt, da ich die Gerätefunktion neu starten musste, und wollte ihr eine Countdown-Popup-Oberfläche hinzufügen.
Die ursprüngliche Idee bestand darin, ein Benachrichtigungs-Popup-Fenster anzupassen, aber ich stellte bald fest, dass die Benachrichtigung immer dort blieb und auf eine Klickbestätigung wartete, anstatt den automatischen und kontinuierlichen Anzeigeeffekt, den ich wollte.
Später dachte ich, dass es möglich wäre, aus DIVs erstellte Popup-Fenster direkt anzuzeigen und auszublenden. Basierend auf dieser Idee haben wir Folgendes:
Schauen wir uns zunächst die Renderings an:
Schauen Sie sich den Quellcode noch einmal an:
Kopieren Sie den Codecode wie folgt:
<!------------------ Popup-Fenster zur Vorbereitung des Vorgangs neu starten--------------->
<div id="reboot_pre">
<div><b>Vorbereitung</b></div>
<br /><br />
<div><p style="margin-left:50px">Wir arbeiten hart daran, Sie auf den Neustart vorzubereiten ... Es wird <span id="reboot_pre_time">4</span> Sekunden</p> dauern </div >
<br />
<div><button type="button" onclick="reboot_cancel()">Abbrechen</button></div>
</div>
<!------------------ Popup-Fenster zur Vorbereitung des Vorgangs neu starten--------------->
<!------------------ Starten Sie den Vorgang neu, um das Fenster zu öffnen--------------->
<div id="reboot_ing">
<div><b>In Bearbeitung</b></div>
<br />
<div><p style="margin-left:40px">Aktueller Neustartvorgang... Es dauert <span id="reboot_ing_time">14</span> Sekunden</p></div>
<br />
<div id="progress_reboot" style="margin-left:40px;color:#00DB00;font-family:Arial;font-weight:bold;height:18px">|</div>
<br />
</div>
<!------------------ Starten Sie den Vorgang neu, um das Fenster zu öffnen--------------->
lt;script type="text/javascript">
var cancel_flag = 0;
var bereits = 0;
/* Vorgänge, die ausgeführt werden, sobald die Webseite geladen wird*/
window.onload = reboot();
/* Klicken Sie auf die Schaltfläche „Neustart“*/
Funktion reboot(){
if(confirm("Dieser Vorgang trennt alle aktuellen Verbindungen und startet Ihr Gerät neu. Sind Sie sicher, dass Sie fortfahren möchten?")){
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;
schon = 0;
setTimeout("showDiv('reboot_pre')",500);
delayPre_reboot("reboot_pre_time");
}
}
/* Vorbereitungs-Popup-Fenster für 5 Sekunden neu starten*/
Funktion delayPre_reboot(str) {
if(!cancel_flag){
var Verzögerung = document.getElementById(str).innerHTML;
if(Verzögerung > 0) {
Verzögerung--;
document.getElementById(str).innerHTML = Verzögerung;
setTimeout("delayPre_reboot('reboot_pre_time')", 1000);
} anders {
hideDiv("reboot_pre");
setTimeout("showDiv('reboot_ing')",500);
delayDo_reboot("reboot_ing_time");
}
}
}
/* Popup-Fenster neu starten, das 15 Sekunden lang läuft*/
Funktion delayDo_reboot(str){
display_reboot(100);
var Verzögerung = document.getElementById(str).innerHTML;
if(Verzögerung > 0) {
Verzögerung--;
document.getElementById(str).innerHTML = Verzögerung;
setTimeout("delayDo_reboot('reboot_ing_time')", 1000);
} anders {
hideDiv("reboot_ing");
alarm("Neustart erfolgreich!");
}
}
/* Ereignis der Schaltfläche „Abbrechen“ bei der Vorbereitung des Neustarts*/
Funktion reboot_cancel(){
cancel_flag = 1;
hideDiv("reboot_pre");
alarm("Sie haben den Neustartvorgang erfolgreich abgebrochen!");
}
/* Popup-Fenster anzeigen */
Funktion showDiv (str){
document.getElementById(str).style.visibility = "visible";
}
/*Popup-Fenster ausblenden*/
Funktion hideDiv (str){
document.getElementById(str).style.visibility = "hidden";
}
/* Starten Sie das laufende Popup-Fenster neu und verschieben Sie die Pufferleiste*/
Funktion display_reboot(max){
schon++;
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 (schon >= max){
window.clearTimeout(timer);
}
}
</script>