Вчера я записал событие получения значения клавиши клавиатуры. С значением это не что иное, как различные операции для разных значений. Я также использовал его раньше, когда писал о жадных змеях. В результате потребовалось много времени, чтобы записать его, поэтому я чувствовал, что это необходимо записать его. С одной стороны, было действительно что -то хорошее, а с другой стороны, я также напомнил себе, что функция, которую я только что понял, снова была незнакомцем. В общем, это считалось обзором прошлого и изучаю новое.
Давайте сначала проанализируем общий принцип реализации операций клавиатуры, чтобы реализовать движение 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"; // Почувствует, что это лучше написать. Javascript? // Этот классический таймер является отличным инструментом для выполнения цикла. Вы все еще помните разницу между setInterval и settimeout document.onkeydown = function (event) {var event = event || window.event; Switch (event.keyCode) {// хаха, получите операцию клавиатуры 37: toleft = true; Break; // Измените переменные и продолжайте выполнять начальный цикл, чтобы вы не могли остановить или остановить случай 38: totop = true; break; Случай 39: tyright = true; Break; Случай 40: tobottom = true; перерыв; }}; document.onkeyup = function (event) {switch (event.keycode) {case 37: toleft = false; Break; // Измените меня обратно и скажите вам остановиться и не перемещать случай 38: totop = false; break; Случай 39: Tyright = false; Break; Случай 40: tobottom = false; перерыв; }}; };Таким образом, мы выполнили требования в принципиальном анализе, и в то же время мы можем перемещать кнопки Div, вниз, влево и правую через кнопки вверх, вниз, левую и правую. Далее давайте записываем чувствительные места.
1. Div должен быть абсолютным. Это не стоит после того, как в течение долгого времени не стоит. Поэтому я проверил и узнал о концепции «Поток документов».
Обычно считается, что поток документов расположен сверху вниз, слева направо, тогда этот элемент является элементом узла, огромным DOM. Давайте сначала поговорим о других объяснениях. Я предпочитаю объяснить это: документ + поток. Как следует из названия, документ означает, что документы веб -страницы, а потоки являются методами вывода. Некоторые объяснения являются методами анализа браузера. Это кажется более ярким. Нормальный поток документов похож на плоскость, и где бы вы ни ставили элемент, это то, где он есть. Плавание, фиксированное позиционирование и относительное позиционирование. Здесь анализ Absolute заключается в том, чтобы регенерировать поток, отделенный от его материнской метки слоя, точно так же, как Z-Index был 0 до, и Z-индекс был сверху, плавающим и сверху, и его можно перемещать случайным образом через левую и сверху.
Я могу понять общее значение, но я чувствую, что некоторые части не могут быть эффективно выражены на языке, а некоторые моменты немного размыты. Я считаю, что по мере накопления опыта я могу понять их более глубоко.
2. Верхний главный код, строчный резист Onkeyup и Onkeydown также являются проблемами, обнаруженными после тестирования этого места. Для JavaScript каждое маленькое место - большая проблема;
3. Разрыв в переключении; Я часто сталкиваюсь с этой Java, поэтому не буду много говорить
Общая проблема - приведенные выше моменты. Вы до сих пор помните прокомментированные ярлыки и другие ярлыки? У этого есть проблема. Мы ответили на это нацелен только на один ключ. Если мы хотим использовать несколько ярлыков, как мы должны их установить?
Давайте посмотрим на код:
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 = "желтый"; break;} totop = true; Break; // Здесь, случай 39: toright = true; break; Случай 40: tobottom = true; перерыв; }};Здесь я столкнулся с другим свойством объекта события, который является еще одним внешним ключевым кодом, CTRLKEY или капитализацией. Его основная функция - проверить состояние ключа Ctrl. На самом деле, есть два других:
Altkey и ShiftKey - это проверки статуса клавиш Alt и клавиш Shift соответственно. Таким образом, вы знаете, как установить ярлык.
На самом деле, если бы я написал это сам, я могу быть удовлетворен, но когда я читаю и ищу, я всегда встречаю своих вдумчивых друзей.
Прикрепите код, знаете ли вы, что делать:
function limit () {var doc = [document.documentelement.clientwidth, document.documentelement.clientHeight] // Предотвратить obj.offsetleft <= 0 && (<span style = "font-family: arial, helvetica, sans-serif; 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"); // Предотвратить док -док в нижнем переполнении [1] - obj.offsettop - obj.offsetheight <= 0 && (obj.style.top = doc [1] - obj.offsetheight + "px")}Что я приложил здесь, так это то, что, хотя код в Интернете предназначен для предотвращения переполнения, я также хочу похвалить этот метод написания. Это намного короче, чем я пишу решительно. Я постараюсь написать в будущем.