بالأمس قمت بتسجيل حدث الحصول على قيمة مفتاح لوحة المفاتيح. مع القيمة ، ليس أكثر من القيام بعمليات مختلفة لقيم مختلفة. لقد استخدمتها أيضًا من قبل عند الكتابة عن الثعابين الجشع. نتيجة لذلك ، استغرق الأمر وقتًا طويلاً لتسجيله ، لذلك شعرت أنه من الضروري تسجيله. من ناحية ، كان هناك بالفعل شيء جيد ، ومن ناحية أخرى ، ذكرت نفسي أيضًا أن الوظيفة التي أدركتها كانت غريبة مرة أخرى. بشكل عام ، كان يعتبر مراجعة للماضي وتعلم الجديد.
دعونا أولاً نحلل المبدأ العام لتنفيذ عمليات لوحة المفاتيح لتحقيق حركة DIV:
*--- لإدراك حركة Div ، النقطة الأكثر أهمية هي الحصول على كائن DIV
*--- البريد: يسحب المطلق 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 (function () {// تعريف الحركة في هذا المكان لا معنى له في الواقع ، فقط لجعل هذه الطريقة أكثر وضوحًا إذا (toleft) { obj.style.left = parseint (obj.offsetleft-a)+"px" ؛ // من الأفضل أن تكتب parseint. JavaScript؟ // هذا المؤقت الكلاسيكي هو أداة رائعة لتنفيذ الحلقة. هل ما زلت تتذكر الفرق بين setInterval و setTimeout document.onkeydown = function (event) {var event = event || window.event ؛ Switch (event.keycode) {// haha ، احصل على حالة تشغيل لوحة المفاتيح 37: toleft = true ؛ break ؛ // تغيير المتغيرات واستمر في تنفيذ الحلقة الأولية ، بحيث لا يمكنك التوقف أو إيقاف الحالة 38: totop = true ؛ break ؛ الحالة 39: Toright = صواب ؛ كسر ؛ الحالة 40: tobottom = صواب ؛ كسر ؛ }} ؛ document.onkeyup = function (event) {switch (event.keycode) {case 37: toleft = false ؛ break ؛ // leveled me back وأقول لك أن تتوقف ولا تنقل الحالة 38: totop = false ؛ break ؛ القضية 39: Toright = false ؛ كسر ؛ الحالة 40: Tobottom = false ؛ كسر ؛ }} ؛ } ؛وبهذه الطريقة ، أكملنا المتطلبات من حيث التحليل المبدأ ، وفي الوقت نفسه ، يمكننا تحريك الأزرار لأعلى ، لأسفل ، اليسار واليمين من خلال الأزرار لأعلى وأسفل ، اليسار واليمين. بعد ذلك ، دعنا نسجل الأماكن الحساسة.
1. يجب أن يكون Div مطلقًا. لا يستحق ذلك بعد الكفاح مع هذا لفترة طويلة. لذلك راجعت وتعلمت عن مفهوم "تدفق المستند".
عادة ما يقال إن تدفق المستندات مرتبة من أعلى إلى أسفل ، من اليسار إلى اليمين ، فإن هذا العنصر هو عنصر عقدة ، دوم ضخم. دعنا نتحدث عن التفسيرات الأخرى أولاً. ما أفضله هو شرح هذا: المستند + دفق. كما يوحي الاسم ، يعني المستند مستندات صفحة الويب ، والتدفقات هي طرق الإخراج. بعض التفسيرات هي طرق تحليل المتصفح. يبدو أن هذا أكثر حيوية. يشبه تدفق المستند العادي طائرة ، وأينما وضعت عنصرًا ، فهو مكانه. العائمة ، وضع ثابت وتحديد المواقع النسبية. هنا ، تحليل المطلق هو تجديد دفق ، مفصولة عن ملصق الطبقة الأم ، تمامًا مثل Z-index كان 0 من قبل ، وكان المؤشر z فوقه ، عائمًا وأعلى ، ويمكن نقله بشكل عشوائي عبر اليسار والأعلى.
أستطيع أن أفهم المعنى العام ، لكنني أشعر أنه لا يمكن التعبير عن بعض الأجزاء بشكل فعال في اللغة ، وبعض النقاط غير واضحة بعض الشيء. أعتقد أنه مع تجميع التجربة ، يمكنني فهمها بعمق أكبر.
2. الكلمة الكبيرة من رمز المفاتيح ، والأحرف الصغيرة من onkeyup و onkeydown هي أيضًا مشاكل تم اكتشافها بعد اختبار هذا المكان. بالنسبة إلى JavaScript ، كل مكان صغير يمثل مشكلة كبيرة ؛
3. كسر التبديل. غالبًا ما أواجه هذا جافا ، لذلك لن أقول الكثير
المشكلة العامة هي النقاط المذكورة أعلاه. هل ما زلت تتذكر مفاتيح الاختصار المعلقة ومفاتيح الاختصار الأخرى؟ هذا لديه مشكلة. لقد استجبنا له فقط استهداف مفتاح واحد. إذا أردنا استخدام بعض مفاتيح الاختصار ، فكيف يجب أن نضعه؟
لنلقي نظرة على الكود:
document.onkeydown = function (event) {// لا يزال نفس الرمز أعلاه. هل ترى الفرق؟ var event = event || window.event ؛ var bctrl = event.ctrlkey ؛ // هنا switch (event.keycode) {case 37: toleft = true ؛ break ؛ الحالة 38: if (bctrl) {obj.style.background = "yellow" ؛ break ؛} totop = true ؛ break ؛ // هنا ، الحالة 39: toright = true ؛ break ؛ الحالة 40: tobottom = صواب ؛ كسر ؛ }} ؛لقد واجهت هنا خاصية أخرى لكائن الحدث ، وهو واحد آخر خارج رمز المفاتيح ، أو ctrlkey ، أو الرسملة. وظيفتها الرئيسية هي التحقق من حالة مفتاح CTRL. في الواقع ، هناك نوعان آخران:
Altkey و ShiftKey هما الشيكات على حالة مفتاح ALT ومفاتيح التحول على التوالي. بهذه الطريقة ، أنت تعرف كيفية تعيين مفتاح اختصار.
في الواقع ، إذا كتبت ذلك بنفسي ، فقد أكون راضيًا ، لكن عندما أقرأ وأبحث ، ألتقي دائمًا بأصدقائي المدروسين.
قم بإرفاق الرمز ، هل تعرف ماذا تفعل:
حدود الوظيفة () {var doc = [document.documentElement.clientwidth ، document.documentElement.clientheight] = 0) ؛ </span> // منع obj.offsettop <= 0 && (obj.style.top = 0) ؛ // منع المستند [0] على الجانب الأيمن - obj.offsetleft - obj.offsetWidth <= 0 && (obj.style.left = doc [0] - obj.offsetwidth + "px") ؛ // منع المستند السفلي في التدفق [1] - obj.offsettop - obj.offsetheight <= 0 && (obj.style.top = doc [1] - obj.offsetheight + "px")}ما أرفقه هنا هو أنه بينما تم تصميم الرمز على الإنترنت لمنع الفائض ، أريد أيضًا أن أمدح طريقة الكتابة هذه. إنه أقصر بكثير مما أكتبه بشكل حاسم. سأحاول الكتابة أقصر في المستقبل.