เมื่อวานนี้ฉันบันทึกเหตุการณ์ที่ได้รับค่าของคีย์บอร์ดคีย์บอร์ด ด้วยค่ามันไม่มีอะไรมากไปกว่าการดำเนินการที่แตกต่างกันสำหรับค่าที่แตกต่างกัน ฉันเคยใช้มาก่อนเมื่อเขียนเกี่ยวกับงูโลภ เป็นผลให้ใช้เวลานานในการบันทึกดังนั้นฉันรู้สึกว่ามันจำเป็นต้องบันทึกมัน ในอีกด้านหนึ่งมีบางสิ่งที่ดีและในทางกลับกันฉันก็เตือนตัวเองว่าฟังก์ชั่นที่ฉันเพิ่งรู้ว่าเป็นคนแปลกหน้าอีกครั้ง โดยทั่วไปแล้วมันถือว่าเป็นการทบทวนอดีตและเรียนรู้ใหม่
ก่อนอื่นให้วิเคราะห์หลักการทั่วไปของการดำเนินการคีย์บอร์ดเพื่อตระหนักถึงการเคลื่อนไหวของ DIV:
*--- เพื่อตระหนักถึงการเคลื่อนไหวของ div จุดที่สำคัญที่สุดคือการได้รับวัตถุ DIV
*--- โพสต์: Absolute ลาก Div ออกจากสตรีมเอกสารอย่างสมบูรณ์ สถานที่นี้พลาด ฉันเพิ่งพบมันหลังจากกลับไปดูงูโลภ มันวิงเวียนมาก
*--- การทำงานของการรับแป้นพิมพ์
*--- ให้คำตอบที่แตกต่างกันตามการดำเนินการแป้นพิมพ์ที่แตกต่างกัน
นี่คือสิ่งที่ฉันคิดว่าอาจต้องให้ความสนใจลองดูที่รหัสก่อน:
ก่อนส่วน HTML
<div id = "showzone">
จากนั้นบันทึกการทำงานจริงของ JavaScript
window.onload = function () {var obj = document.getElementById ("showzone"); // ได้รับวัตถุแล้วนี่คือ var ที่ง่ายที่สุด A = 10; var toleft = toright = totop = tobottom = false; // กำหนดตัวแปรบูลีนหลายตัวสำหรับการดำเนินการทิศทางที่ตามมาและดูเหมือนว่าจะเป็นสี่ทิศทาง var move = setInterval (ฟังก์ชัน () {// คำจำกัดความการย้ายในสถานที่นี้ไม่มีความหมาย obj.style.left = parseint (obj.offsetleft-a)+"px"; // รู้สึกดีกว่าที่จะเขียน parseint JavaScript? // ตัวจับเวลาแบบคลาสสิกนี้เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการดำเนินการลูป คุณยังจำความแตกต่างระหว่าง setInterval และ settimeout document.onkeydown = function (เหตุการณ์) {var event = event || window.event; switch (event.keycode) {// haha รับกรณีการดำเนินการแป้นพิมพ์ 37: toleft = true; break; // เปลี่ยนตัวแปรและดำเนินการต่อเพื่อดำเนินการลูปเริ่มต้นเพื่อให้คุณไม่สามารถหยุดหรือหยุดกรณี 38: totop = true; break; กรณีที่ 39: toright = true; break; กรณีที่ 40: tobottom = true; break; - document.onkeyup = function (เหตุการณ์) {switch (event.keycode) {กรณี 37: toleft = false; break; // เปลี่ยนฉันกลับและบอกให้คุณหยุดและไม่ย้ายกรณี 38: totop = false; break; กรณีที่ 39: toright = false; break; กรณีที่ 40: tobottom = false; break; - -ด้วยวิธีนี้เราได้ทำตามข้อกำหนดในการวิเคราะห์หลักการและในเวลาเดียวกันเราสามารถเลื่อนปุ่มขึ้นลงลงไปทางซ้ายและขวาผ่านปุ่มขึ้นลงไปด้านซ้ายและขวา ถัดไปให้บันทึกสถานที่ที่ละเอียดอ่อน
1. DIV จะต้องแน่นอน มันไม่คุ้มค่าหลังจากดิ้นรนกับเรื่องนี้มาเป็นเวลานาน ดังนั้นฉันจึงตรวจสอบและเรียนรู้เกี่ยวกับแนวคิด "การไหลของเอกสาร"
การไหลของเอกสารมักจะถูกจัดเรียงจากบนลงล่างจากซ้ายไปขวาจากนั้นองค์ประกอบนี้เป็นองค์ประกอบโหนดซึ่งเป็น DOM ขนาดใหญ่ มาพูดถึงคำอธิบายอื่น ๆ ก่อน สิ่งที่ฉันชอบคือการอธิบายสิ่งนี้: เอกสาร + สตรีม ตามชื่อที่แนะนำเอกสารหมายถึงเอกสารหน้าเว็บและสตรีมเป็นวิธีการส่งออก คำอธิบายบางอย่างคือวิธีการวิเคราะห์เบราว์เซอร์ สิ่งนี้ดูเหมือนจะสดใสกว่า การไหลของเอกสารปกติเป็นเหมือนเครื่องบินและทุกที่ที่คุณใส่องค์ประกอบมันเป็นที่ที่มันอยู่ การลอยตัวการวางตำแหน่งคงที่และการวางตำแหน่งสัมพัทธ์ ที่นี่การวิเคราะห์ Absolute คือการสร้างกระแสใหม่แยกออกจากฉลากเลเยอร์พาเรนต์เช่นเดียวกับ z-index เป็น 0 ก่อนและดัชนี Z อยู่ด้านบนของมันลอยและด้านบนและสามารถเคลื่อนย้ายแบบสุ่มผ่านซ้ายและด้านบน
ฉันสามารถเข้าใจความหมายทั่วไปได้ แต่ฉันรู้สึกว่าบางส่วนไม่สามารถแสดงออกได้อย่างมีประสิทธิภาพในภาษาและบางจุดก็เบลอเล็กน้อย ฉันเชื่อว่าเมื่อประสบการณ์สะสมฉันสามารถเข้าใจพวกเขาได้อย่างลึกซึ้งยิ่งขึ้น
2. ตัวพิมพ์ใหญ่ของปุ่มกด, ตัวพิมพ์เล็กของ onkeyup และ onkeydown ก็เป็นปัญหาที่ค้นพบหลังจากทดสอบสถานที่นี้ สำหรับ JavaScript สถานที่เล็ก ๆ ทุกแห่งเป็นปัญหาใหญ่
3. หยุดพักในสวิตช์; ฉันมักจะพบชวานี้ดังนั้นฉันจะไม่พูดอะไรมากมาย
ปัญหาทั่วไปคือคะแนนข้างต้น คุณยังจำปุ่มลัดที่แสดงความคิดเห็นและปุ่มลัดอื่น ๆ ได้หรือไม่? สิ่งนี้มีปัญหา เราตอบสนองต่อเป้าหมายเฉพาะคีย์เดียว หากเราต้องการใช้ปุ่มลัดบางอย่างเราควรตั้งค่าอย่างไร
ลองดูที่รหัส:
document.onkeydown = function (เหตุการณ์) {// มันยังคงเป็นรหัสเดียวกับด้านบน คุณเห็นความแตกต่างหรือไม่? var event = event || window.event; var bctrl = event.ctrlkey; // ที่นี่สวิตช์ (event.keycode) {กรณี 37: toleft = true; break; กรณีที่ 38: ถ้า (bctrl) {obj.style.background = "สีเหลือง"; break;} totop = true; break; // ที่นี่, กรณีที่ 39: toright = true; break; กรณีที่ 40: tobottom = true; break; -ที่นี่ฉันพบคุณสมบัติอื่นของวัตถุเหตุการณ์ซึ่งเป็นอีกหนึ่งปุ่มนอกปุ่มกด Ctrlkey หรือการใช้อักษรตัวพิมพ์ใหญ่ ฟังก์ชั่นหลักคือการตรวจสอบสถานะของคีย์ CTRL ในความเป็นจริงมีอีกสองอย่างเช่น:
Altkey และ ShiftKey เป็นการตรวจสอบสถานะของปุ่ม Alt และปุ่ม Shift ตามลำดับ ด้วยวิธีนี้คุณรู้วิธีตั้งค่าคีย์ทางลัด
อันที่จริงถ้าฉันเขียนด้วยตัวเองฉันอาจจะพอใจ แต่เมื่อฉันอ่านและค้นหาฉันมักจะพบกับเพื่อนที่รอบคอบของฉัน
แนบรหัสคุณรู้ว่าต้องทำอย่างไร:
ฟังก์ชั่น จำกัด () {var doc = [document.documentelement.clientWidth, documentEnumentElement.clientheight] // ป้องกัน obj.offsetleft <= 0 && (<span style = "font-family: arial, helvetica, sans-serif;"> obj </span> sans-serif; ">. style.left = 0); </span> // ป้องกัน obj.offsettop <= 0 && (obj.style.top = 0); // ป้องกัน doc [0] ทางด้านขวา - obj.offsetleft - obj.offsetWidth <= 0 && (obj.style.left = doc [0] - obj.offsetWidth + "px"); // ป้องกันไม่ให้ Doc Overflow ด้านล่าง [1] - obj.offsettop - obj.offsetheight <= 0 && (obj.style.top = doc [1] - obj.offsetheight + "px")}}สิ่งที่ฉันแนบมาที่นี่คือในขณะที่รหัสบนอินเทอร์เน็ตได้รับการออกแบบมาเพื่อป้องกันการล้นฉันยังต้องการชมวิธีการเขียนนี้ มันสั้นกว่าสิ่งที่ฉันเขียนอย่างเด็ดขาด ฉันจะพยายามเขียนสั้นลงในอนาคต