لقد قمت مؤخرًا بإنشاء صفحة ويب لإعدادات بسيطة لأنني كنت بحاجة إلى إعادة تشغيل وظيفة الجهاز، وأردت إضافة واجهة منبثقة للعد التنازلي إليها.
كانت الفكرة الأولية هي تخصيص نافذة منبثقة للتنبيه، لكنني سرعان ما اكتشفت أن التنبيه سيبقى دائمًا هناك في انتظار تأكيد النقر، بدلاً من تأثير العرض التلقائي والمستمر الذي أردته.
لاحقًا، اعتقدت أنه سيكون من الممكن عرض وإخفاء النوافذ المنبثقة المصنوعة من DIVs مباشرةً. وبناء على هذه الفكرة لدينا ما يلي:
دعونا نلقي نظرة على الاداءات أولا:
انظر إلى الكود المصدري مرة أخرى:
انسخ رمز الكود كما يلي:
<!------------------ النافذة المنبثقة لإعداد العملية -------------->
<div معرف = "reboot_pre">
<div><b>التحضير</b></div>
<br /><br />
<div><p style="margin-left:50px">نحن نعمل جاهدين على إعدادك لعملية إعادة التشغيل... سوف تستغرق <span id="reboot_pre_time">4</span> ثوانٍ</p> </ديف>
<br />
<div><button type="button" onclick="reboot_cancel()">إلغاء</button></div>
</div>
<!------------------ النافذة المنبثقة لإعداد العملية -------------->
<!------------------ أعد تشغيل العملية لتظهر النافذة --------------->
<div معرف = "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;نوع البرنامج النصي = "نص/جافا سكريبت">
فار Cancel_flag = 0;
فار بالفعل = 0؛
/* يتم تنفيذ العمليات بمجرد تحميل صفحة الويب*/
window.onload = reboot();
/* انقر فوق تشغيل زر إعادة التشغيل*/
إعادة تشغيل الوظيفة (){
if(confirm("ستؤدي هذه العملية إلى قطع كافة الاتصالات الحالية وإعادة تشغيل جهازك. هل أنت متأكد من رغبتك في المتابعة؟")){
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;
بالفعل = 0؛
setTimeout("showDiv('reboot_pre')",500);
تأخيرPre_reboot("reboot_pre_time");
}
}
/* نافذة التحضير المنبثقة لمدة 5 ثوانٍ*/
وظيفة تأخيرPre_reboot (شارع) {
إذا (!cancel_flag){
تأخير var = document.getElementById(str).innerHTML;
إذا (تأخير> 0) {
تأخير--؛
document.getElementById(str).innerHTML = تأخير;
setTimeout("delayPre_reboot('reboot_pre_time')", 1000);
} آخر {
HideDiv("reboot_pre");
setTimeout("showDiv('reboot_ing')",500);
تأخيرDo_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')", 1000);
} آخر {
HideDiv("reboot_ing");
تنبيه ("تم إعادة التشغيل بنجاح!")؛
}
}
/* حدث زر الإلغاء عند الاستعداد لإعادة التشغيل*/
وظيفة إعادة التشغيل_إلغاء () {
Cancel_flag = 1;
HideDiv("reboot_pre");
تنبيه("لقد قمت بإلغاء عملية إعادة التشغيل بنجاح!");
}
/* عرض النافذة المنبثقة */
وظيفة showDiv (شارع) {
document.getElementById(str).style.visibility = "visible";
}
/*إخفاء النافذة المنبثقة*/
وظيفة إخفاءDiv (شارع) {
document.getElementById(str).style.visibility = "hidden";
}
/* أعد تشغيل توقيت النافذة المنبثقة الجاري وتحريك شريط المخزن المؤقت*/
وظيفة عرض_إعادة التشغيل (الحد الأقصى) {
بالفعل++؛
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);
إذا (بالفعل >= الحد الأقصى){
window.clearTimeout(timer);
}
}
</script>