Saya baru-baru ini membuat halaman web pengaturan sederhana. Karena saya perlu memulai ulang fungsi perangkat, saya ingin menambahkan antarmuka pop-up hitung mundur ke dalamnya.
Ide awalnya adalah untuk menyesuaikan jendela pop-up peringatan, namun saya segera menemukan bahwa peringatan akan selalu berada di sana menunggu konfirmasi klik, bukan efek tampilan otomatis dan berkelanjutan yang saya inginkan.
Belakangan, saya berpikir bahwa jendela pop-up yang terbuat dari DIV dapat langsung ditampilkan dan disembunyikan. Berdasarkan gagasan ini, kami memiliki yang berikut:
Mari kita lihat renderingnya terlebih dahulu:
Lihat lagi kode sumbernya:
Copy kode kodenya sebagai berikut:
<!------------------ Jendela pop-up persiapan operasi ulang--------------->
<div id="reboot_pre">
<div><b>Persiapan</b></div>
<br /><br />
<div><p style="margin-left:50px">Kami bekerja keras untuk mempersiapkan Anda menghadapi operasi restart... Ini akan memakan waktu <span id="reboot_pre_time">4</span> detik</p> </div>
<br />
<div><button type="button" onclick="reboot_cancel()">Batal</button></div>
</div>
<!------------------ Jendela pop-up persiapan operasi ulang--------------->
<!------------------ Mulai ulang operasi untuk memunculkan jendela--------------->
<div id="reboot_ing">
<div><b>Sedang berlangsung</b></div>
<br />
<div><p style="margin-left:40px">Mulai ulang operasi yang sedang berlangsung... Ini akan memakan waktu <span id="reboot_ing_time">14</span> detik</p></div>
<br />
<div id="progress_reboot" style="margin-left:40px;color:#00DB00;font-family:Arial;font-weight:bold;height:18px">|</div>
<br />
</div>
<!------------------ Mulai ulang operasi untuk memunculkan jendela--------------->
lt;tipe skrip="teks/javascript">
var batal_bendera = 0;
var sudah = 0;
/* Operasi dilakukan segera setelah halaman web dimuat*/
jendela.onload = reboot();
/* Klik pengoperasian tombol restart*/
fungsi reboot(){
if(confirm("Operasi ini akan memutuskan semua koneksi saat ini dan memulai ulang perangkat Anda. Apakah Anda yakin ingin melanjutkan?")){
document.getElementById("reboot_pre_time").innerHTML = 4;
document.getElementById("reboot_ing_time").innerHTML = 14;
document.all.progress_reboot.innerHTML = "|";
unduh_bendera = 0;
batalkan_bendera = 0;
sudah = 0;
setTimeout("showDiv('reboot_pre')",500);
delayPre_reboot("reboot_pre_time");
}
}
/* Mulai ulang jendela pop-up persiapan selama 5 detik*/
fungsi penundaanPre_reboot(str) {
jika(!batalkan_bendera){
var penundaan = dokumen.getElementById(str).innerHTML;
jika(penundaan > 0) {
menunda--;
document.getElementById(str).innerHTML = penundaan;
setTimeout("delayPre_reboot('reboot_pre_time')", 1000);
} kalau tidak {
hideDiv("reboot_pre");
setTimeout("showDiv('reboot_ing')",500);
delayDo_reboot("reboot_ing_time");
}
}
}
/* Mulai ulang jendela pop-up yang sedang berlangsung selama 15 detik*/
fungsi penundaanDo_reboot(str){
tampilan_reboot(100);
var penundaan = dokumen.getElementById(str).innerHTML;
jika(penundaan > 0) {
menunda--;
document.getElementById(str).innerHTML = penundaan;
setTimeout("delayDo_reboot('reboot_ing_time')", 1000);
} kalau tidak {
hideDiv("reboot_ing");
alert("Restart berhasil!");
}
}
/* Peristiwa tombol batal saat bersiap memulai ulang*/
fungsi reboot_cancel(){
batalkan_bendera = 1;
hideDiv("reboot_pre");
alert("Anda berhasil membatalkan operasi restart!");
}
/* Menampilkan jendela pop-up */
fungsi showDiv (str){
document.getElementById(str).style.visibility = "terlihat";
}
/*Sembunyikan jendela pop-up*/
fungsi sembunyikanDiv (str){
document.getElementById(str).style.visibility = "tersembunyi";
}
/* Mulai ulang pengaturan waktu jendela pop-up yang sedang berlangsung dan pindahkan bilah penyangga*/
fungsi display_reboot(maks){
sudah++;
var dispObj = dokumen.all.progress_reboot;
dispObj.style.width = 100.0*sudah/max+"px";
document.all.progress_reboot.innerHTML += "|||||";
var timer = window.setTimeout("display("+maks+")",1000);
jika (sudah >= maks){
window.clearTimeout(pengatur waktu);
}
}
</skrip>