ฉันจะไม่พูดเรื่องไร้สาระมากฉันจะโพสต์รหัสให้คุณ รหัสเฉพาะมีดังนี้:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> delay display box </title> <style>#div1 {float: left; width: 60px; ความสูง: 60px; 200px; พื้นหลังสี: #cccccc; แสดง: ไม่มี;} </style> <script> window.onload = function () {var odiv1 = document.getElementById ('div1'); var odiv2 = document.getElementById ('div2'); var timer = null; odiv2.style.display = 'block'; // div2 // เมื่อเมาส์เคลื่อนที่เป็น div1}; /////ODIV1.ONMOUSOUT = function () {// timer = setTimeOut (ฟังก์ชั่น () {// odiv2.style.display = 'none'; // ซ่อน div2 //}, 500); // เพื่อที่จะย้ายจาก div1 เป็น div2 เมื่อ DIV1 ถูกย้ายออกจาก DIV1 ควรมีการตั้งค่าล่าช้าเมื่อ DIV2 ถูกซ่อน //}; ///////////////////////////////////////////////////lime // ล้างการตั้งค่าความล่าช้าเมื่อเมาส์เคลื่อนที่เป็น div2, div2 ควรแสดง //}; //////ODIV2.onMouseOut = function () {// timer = settimeout (ฟังก์ชัน () {// odiv2.style.display = 'ไม่มี'; // // เมื่อเมาส์เคลื่อนตัวออกจาก DIV2 และลงใน DIV1, Div2 จะกะพริบและแสดงอีกครั้งตั้งค่าความล่าช้าเพื่อล้างเอฟเฟกต์กะพริบ // // อย่างไรก็ตามหลังจากตั้งค่าความล่าช้าและย้ายเมาส์ไปยัง DIV1, DIV2 ถูกซ่อนอยู่เนื่องจาก settimeout, // // การหน่วงเวลาควรถูกล้างและรหัสสำหรับความล่าช้าจะถูกเพิ่มในเหตุการณ์ ODIV1.onMouseOver เพื่อล้างความล่าช้า //}; // เนื่องจากรหัสในเหตุการณ์ทั้งสี่นี้เหมือนกันหรือคล้ายกันการประมวลผลแบบง่ายต่อไปนี้สามารถทำได้: odiv1.onmouseover = odiv2.onmouseover = function () {cleartimeout (ตัวจับเวลา); odiv2.style.display = 'block';/* แม้ว่า odiv2.onmouseover ไม่ได้เขียนไว้ใน odiv2.style.display = 'block'; แต่ในความเป็นจริง ODIV2 อยู่ในสถานะ 'บล็อก' การเขียนรหัสอีกหนึ่งรหัสไม่มีผลกระทบอย่างมาก*/}; odiv1.onmouseout = odiv2.onmouseout = function () {timer = settimeout (ฟังก์ชั่น () {odiv2.style.display = 'ไม่มี'; // ซ่อนตัว // เพื่อที่จะย้ายจาก DIV1 ไปยัง DIV2 ควรมีการตั้งค่าความล่าช้าเมื่อ DIV1 ถูกย้ายออกจาก div1}; // ผลการดำเนินการรหัสที่เรียบง่ายนั้นเหมือนกับเอฟเฟกต์รหัสก่อนหน้า} </script> </head> <body> <h2> ความล่าช้าในกล่องคะแนนที่ต้องได้รับความสนใจเมื่อเขียนกล่องพรอมต์ล่าช้าจะถูกบันทึกไว้ในความคิดเห็น โปรดให้ความสนใจกับมันทีละคน ฟังก์ชั่นนี้ราบรื่นขึ้นหลังจากอ่านวิดีโอบทช่วยสอน เหตุผลก็คือก่อนที่จะเขียนรหัสรายการของฟังก์ชั่นที่ต้องการจะถูกนำไปใช้ทีละหนึ่ง หากมีปัญหามันจะดีกว่ามากที่จะทำการปรับเปลี่ยนที่สอดคล้องกันมากกว่าที่จะเขียนรหัสโดยตรง