تصف هذه المقالة طريقة استخدام SetTimeOut لتنفيذ مربع تحذير منبثقة متأخرة. شاركه للرجوع إليه. التفاصيل كما يلي:
أولا أظهر لك رمز JS لتأخير/توقيت/نافذة منبثقة قسرية
شرح المعلمة: تعيين الوقت: ثم. تغيير حجم) حوار الحوار: 800px (العرض) مربع الحوار: 600px (الارتفاع) 3000 (تأخير الوقت المنبثقة ، الوحدة: milliseconds.1 ثانية = 1000ms) <!-pop-up ad-> <script language = "javaScript"> get () String (document.cookie) var cookieheader = "cookie1 =" var beginposition = cookiestring.indexof (cookieheader) if (startPosition! = -1) {} else {document.cookie = "cookie1 = popwin ؛ expires ="+} then.togmtstring () focusId = setTimeout ("focus () ؛ window.showmodelessDialog ('ttan.htm' ، '' ، 'scroll: 0 ؛ status: 0 ؛ HELP: 0 ؛ RESISABLE: 0 ؛ DialogWidth: 0px ؛ dialogheight: 0px ') "، 3000) window.focus () ؛}} get () ؛ </script> <!-pop-up ---> محتويات ttan.htm: <script language = "javaScript"> <!-window.open ("http: // pop-up webpage/") ؛ //-> </script> <script language = "javaScript"> <!-settimeout ('window.close () ؛ منبثقة تأخرت ، ويمكن أن تحقق منبثقة القسرية! !بعد تنفيذ الكود التالي ، سيظهر مربع تحذير بعد النقر فوق الزر ، والذي يوضح بشكل أساسي كيفية استخدام setTimeOut
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> مربع موجه عرض Delay Display </title> <style> #div1 {float: left ؛ العرض: 60px ؛ الارتفاع: 60px ؛ لون الخلفية: أكوا ؛ } #div2 {الموضع: النسبي ؛ تعويم: اليسار. الهامش: 0 10px ؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ خلفية اللون: #CCCCCC ؛ العرض: لا شيء ؛ } </style> <script> window.onload = function () {var odiv1 = document.getElementById ('div1') ؛ var odiv2 = document.getElementById ('div2') ؛ var timer = null ؛ // odiv1.onmouseover = function () {// clearTimeOut (timer) ؛ // odiv2.style.display = 'block' ؛ // div2 // عندما ينتقل الماوس إلى div1} ؛ ////div1.onmouseout = function () {// timer = setTimeOut (function () {// odiv2.style.display = 'none' ؛ // من أجل الانتقال من Div1 إلى Div2 ، يجب أن يكون لـ Div2 Hidden إعداد تأخير //} ؛ /////div2.onmouseover = function () {// cleartimeout (timer) ؛ // امسح إعداد التأخير ، عندما ينتقل الماوس إلى Div2 ، يجب عرض Div2 //} ؛ ////div2.onmouseout = function () {// timer = setTimeOut (function () {// odiv2.style.display = 'none' ؛ // عندما يتحرك الماوس من div2 ، يجب أن يكون div2 مخفيًا //} ، 500) ؛ // عندما ينتقل الماوس إلى Div2 وإلى Div1 ، سيومض Div2 وعرضه مرة أخرى ، ويضع تأخيرًا لمسح تأثير وميض ؛ // // ولكن بعد تحديد التأخير وعندما ينتقل الماوس إلى Div1 ، يتم إخفاء Div2 لأن setTimeout ، // // يجب مسح التأخير ، ويتم إضافة رمز التأخير في حدث ODIV1.OnMouseover لمسح التأخير. //} ؛ // نظرًا لأن الرموز الموجودة في هذه الأحداث الأربعة متشابهة أو متشابهة ، يمكن إجراء المعالجة المبسطة التالية: ODIV1.OnMouseover = ODIV2.ONMOUSEOVER = function () {cleartimeout (timer) ؛ Odiv2.Style.Display = 'block' ؛ /* عندما ينتقل الماوس إلى Div1 ، يتم عرض Div2. على الرغم من أن ODIV2.Onmouseover غير مكتوب في ODIV2.Style.Display = 'block' ؛ ولكن في الواقع ODIV2 في حالة "الكتلة" ، فإن كتابة رمز آخر ليس له تأثير كبير*/} ؛ ODIV1.ONMOUSEOUT = ODIV2.ONMOUSEOUT = function () {timer = setTimeOut (function () {odiv2.style.display = 'none' ؛ // إخفاء div2 عندما يزيل الماوس div1} ، 500) ؛ // من أجل الانتقال من Div1 إلى Div2 ، يجب أن يكون هناك إعداد تأخير عند نقل Div1 من Div1} ؛ // نتيجة تنفيذ الكود المبسطة هي بالضبط نفس تأثير الكود السابق. } </script> </head> <body> <h2> مربع موجه التأخير </h2> <div id = "div1"> </viv> <div id = "div2"> </viv> </body> </html>يتم تسجيل النقاط التي يجب الانتباه إليها عند كتابة مربع موجه التأخير في التعليقات. يرجى الانتباه إليها واحدة تلو الأخرى. هذه الوظيفة أكثر سلاسة بعد قراءة البرنامج التعليمي للفيديو. والسبب هو أنه قبل كتابة الكود ، يتم تنفيذ قائمة الوظائف المطلوبة واحدة تلو الأخرى. إذا كانت هناك مشكلة ، فمن الأفضل بكثير إجراء تعديلات مماثلة من كتابة الرمز مباشرة.