ฉันเพิ่งสร้างหน้าเว็บการตั้งค่าแบบง่ายๆ เนื่องจากฉันต้องรีสตาร์ทฟังก์ชันอุปกรณ์ ฉันจึงต้องการเพิ่มอินเทอร์เฟซแบบป๊อปอัปนับถอยหลังลงไป
แนวคิดเริ่มแรกคือการปรับแต่งหน้าต่างป๊อปอัปการแจ้งเตือน แต่ในไม่ช้าฉันก็ค้นพบว่าการแจ้งเตือนจะอยู่ที่นั่นเพื่อรอการยืนยันการคลิกเสมอ แทนที่จะเป็นเอฟเฟกต์การแสดงผลอัตโนมัติและต่อเนื่องที่ฉันต้องการ
ต่อมา ฉันคิดว่ามันเป็นไปได้ที่จะแสดงและซ่อนหน้าต่างป๊อปอัปที่สร้างจาก DIV ได้โดยตรง จากแนวคิดนี้ เรามีดังต่อไปนี้:
มาดูการเรนเดอร์กันก่อน:
ดูซอร์สโค้ดอีกครั้ง:
คัดลอกรหัสรหัสดังต่อไปนี้:
<!------------------ หน้าต่างป๊อปอัปเตรียมการดำเนินการรีสตาร์ท --------------->
<div id="reboot_pre">
<div><b>กำลังเตรียม</b></div>
<br /><br />
<div><p style="margin-left:50px">เรากำลังทำงานอย่างหนักเพื่อเตรียมคุณให้พร้อมสำหรับการรีสตาร์ท... โดยจะใช้เวลา <span id="reboot_pre_time">4</span> วินาที</p> </div >
<br />
<div><button type="button" onclick="reboot_cancel()">ยกเลิก</button></div>
</div>
<!------------------ หน้าต่างป๊อปอัปเตรียมการดำเนินการรีสตาร์ท --------------->
<!------------------ เริ่มการทำงานใหม่เพื่อเปิดหน้าต่างขึ้นมา --------------->
<div id="reboot_ing">
<div><b>อยู่ระหว่างดำเนินการ</b></div>
<br />
<div><p style="margin-left:40px">กำลังรีสตาร์ทการดำเนินการ... จะใช้เวลา <span id="reboot_ing_time">14</span> วินาที</p></div>
<br />
<div id="progress_reboot" style="margin-left:40px;color:#00DB00;font-family:Arial;font-weight:bold;height:18px">|</div>
<br />
</div>
<!------------------ เริ่มการทำงานใหม่เพื่อเปิดหน้าต่างขึ้นมา --------------->
lt;script type="text/javascript">
var cancel_flag = 0;
var แล้ว = 0;
/* การดำเนินการเกิดขึ้นทันทีที่โหลดหน้าเว็บ*/
window.onload = รีบูต ();
/* คลิกการทำงานของปุ่มรีสตาร์ท*/
ฟังก์ชั่นรีบูต () {
if(confirm("การดำเนินการนี้จะยกเลิกการเชื่อมต่อปัจจุบันทั้งหมดและรีสตาร์ทอุปกรณ์ของคุณ คุณแน่ใจหรือไม่ว่าต้องการดำเนินการต่อ?")){
document.getElementById("reboot_pre_time").innerHTML = 4;
document.getElementById("reboot_ing_time").innerHTML = 14;
document.all.progress_reboot.innerHTML = "|";
ดาวน์โหลด_แฟล็ก = 0;
ยกเลิก_แฟล็ก = 0;
แล้ว = 0;
setTimeout("showDiv('reboot_pre')",500);
DelayPre_reboot("reboot_pre_time");
-
-
/* รีสตาร์ทหน้าต่างป๊อปอัปการเตรียมการเป็นเวลา 5 วินาที*/
ฟังก์ชั่นล่าช้าPre_reboot (str) {
ถ้า(!cancel_flag){
var ล่าช้า = document.getElementById(str).innerHTML;
ถ้า (ล่าช้า > 0) {
ล่าช้า--;
document.getElementById(str).innerHTML = ความล่าช้า;
setTimeout("delayPre_reboot('reboot_pre_time')", 1,000);
} อื่น {
HideDiv("reboot_pre");
setTimeout("showDiv('reboot_ing')",500);
DelayDo_reboot("reboot_ing_time");
-
-
-
/* รีสตาร์ทหน้าต่างป๊อปอัปที่กำลังดำเนินการเป็นเวลา 15 วินาที*/
ฟังก์ชั่นล่าช้าDo_reboot (str) {
display_reboot(100);
var ล่าช้า = document.getElementById(str).innerHTML;
ถ้า (ล่าช้า > 0) {
ล่าช้า--;
document.getElementById(str).innerHTML = ความล่าช้า;
setTimeout("delayDo_reboot('reboot_ing_time')", 1,000);
} อื่น {
HideDiv("reboot_ing");
alert("รีสตาร์ทสำเร็จ!");
-
-
/* เหตุการณ์ปุ่มยกเลิกเมื่อเตรียมรีสตาร์ท */
ฟังก์ชั่น restart_cancel(){
cancel_flag = 1;
HideDiv("reboot_pre");
alert("คุณได้ยกเลิกการรีสตาร์ทสำเร็จแล้ว!");
-
/* แสดงหน้าต่างป๊อปอัป */
ฟังก์ชั่น showDiv (str){
document.getElementById(str).style.visibility = "มองเห็นได้";
-
/*ซ่อนหน้าต่างป๊อปอัป*/
ฟังก์ชั่น HideDiv (str){
document.getElementById(str).style.visibility = "ซ่อน";
-
/* รีสตาร์ทการกำหนดเวลาหน้าต่างป๊อปอัปที่กำลังดำเนินอยู่และย้ายแถบบัฟเฟอร์*/
ฟังก์ชั่น display_reboot (สูงสุด) {
แล้ว++;
var dispObj = document.all.progress_reboot;
dispObj.style.width = 100.0*แล้ว/สูงสุด+"px";
document.all.progress_reboot.innerHTML += "|||||";
var timer = window.setTimeout("display("+max+")",1000);
ถ้า (แล้ว >= สูงสุด){
window.clearTimeout(ตัวจับเวลา);
-
-
</สคริปต์>