في الواقع ، يستخدم هذا المثال مرتين أساسيتين لـ JS ، و Onboard Event OnKeyDown ، و SetInterval للتنفيذ الدوري.
إدراك التأثير
عند الضغط على مفتاح لوحة المفاتيح ، تدرك الأحرف الموجودة على صفحة الويب الإجراء المقابل ، وتحقيق تأثير استخدام لوحة المفاتيح للتحكم في الحركة
خطوات التنفيذ
1. وظيفة الحجز قيمة مفتاح:
دبليو: صعودا
S: أسفل
ج: اليسار
D: إلى اليمين
الفضاء: توقف
2. بعد حجز القيمة الرئيسية ، يجب أن تكون قادرًا على التقاط الحدث الرئيسي وتحديد المفتاح الذي يضغط عليه المستخدم؟
يمكنك استخدام OnKeyDown لالتقاط أحداث لوحة المفاتيح
يمكنك استخدام Event.KeyCode للحصول على رموز القيمة الرئيسية
3. استبدل الصورة بحدث تنفيذ دورة SetInterval
استبدل الصورة لتحقيق تأثير حركة المهمة
ولكن كن حذرًا في استخدام ClearInterval لتنفيذه ، وإلا فإنه سيصبح أسرع وأسرع
نموذج الرمز:
<html> <head> <meta charset = "utf-8"/> <title> تمشي الحرف </title> </head> <body onKeyDown = "show ()"> <ul style = "postion: absolute ؛ الحدود: 1PX Solid #999 ؛ القائمة: لا شيء ؛ العرض: 150px ؛ الحشو: 20px ؛ الخلفية: #ffffef ؛ href = "// www.vevb.com"> wulin.com </a> </u> </li></ul> <div style = "الموضع: absolute ؛ top: 0 ؛ left: 0" id = 'di'> <img src = "// files.vevb.com/file_images/article/201408/201482791327688.gif؟201472791345" id = "img"> </viv> <script> var img1 = '// files.vevb.com/file_images/article/201408/201482791656841.gif؟201472791722' ؛ img2 = '// files.vevb.com/file_images/article/201408/201482791327688.gif؟201472791345' ؛ s = document.getElementById ('img') ؛ var str = s.src ؛ var area = document.getElementById ('di') ؛ var xpos = parseint (area.style.left) ؛ var ypos = parseint (area.style.top) ؛ pos = str.lastindexof ('/')+1 ؛ var hz = str.substr (pos) ؛ if (hz == img1) {s.src = img2 ؛} else {s.src = img1 ؛}} ، 50) ؛ 87: img1 = '// files.vevb.com/file_images/article/201408/ren_h_1.gif' ؛ img2='//files.vevb.com/file_images/article/201408/ren_h_22 65: img1 = '// files.vevb.com/file_images/article/201408/ren_l_1.gif' ؛ img2='//files.vevb.com/file_images/article/201408/ren_22 68: img1 = '// files.vevb.com/file_images/article/201408/ren_r_1.gif' ؛ img2='//files.vevb.com/file_images/article/201408/ren_r_2.gif' ؛xs=5؛ys=0 ؛بريك ؛ 83: img1 = '// files.vevb.com/file_images/article/201408/ren_q_1.gif' ؛ img2='//files.vevb.com/file_images/article/201408/ren_q_22. العلم = خطأ ؛ استراحة؛ } الحالة 13: if (! flag) {ks () ؛ العلم = صحيح ؛ كسر ؛ }}} </script> </body> </html>