Ayer grabé el evento de obtener el valor de la tecla de teclado. Con el valor, no es más que hacer diferentes operaciones para diferentes valores. También lo he usado antes al escribir sobre serpientes codiciosas. Como resultado, tomó mucho tiempo grabarlo, así que sentí que era necesario grabarlo. Por un lado, de hecho había algo bueno, y por otro lado, también me recordé que la función que me di cuenta era un extraño nuevamente. En general, se consideró una revisión del pasado y aprendió lo nuevo.
Primero analicemos el principio general de implementar operaciones de teclado para realizar el movimiento Div:
*--- Para realizar el movimiento de div, el punto más importante es obtener el objeto Div
*--- Publicación: Absoluto arrastra el DIV completamente fuera de la transmisión del documento. Se pierde este lugar. Solo lo encontré después de volver a ver la serpiente codiciosa. Es tan mareado.
*--- La operación de obtener el teclado
*--- Dé diferentes respuestas de acuerdo con diferentes operaciones de teclado
Esto es lo que pienso probablemente necesite prestar atención, veamos primero el código:
Primero, la parte HTML
<div id = "showzone">
Luego registre la operación real de JavaScript
window.onload = function () {var obj = document.getElementById ("showzone"); // se ha obtenido el objeto, este es el var a = 10 más simple; var toleft = toright = totop = tobottom = false; // Defina varias variables booleanas para la operación de dirección posterior, y parece ser cuatro direcciones var moverse = setInterval (function () {// La definición de movimiento en este lugar es realmente sin sentido, solo para hacer que este método sea más obvio si (toleft) { obj.style.left = parseint (obj.offsetleft-a)+"px"; // Se siente mejor escribir parseint. JavaScript? // Este temporizador clásico es una gran herramienta para la ejecución de bucle. ¿Todavía recuerda la diferencia entre SetInterval y SetTimeOut documento.onkeydown = function (event) {var event = event || window.event; switch (event.keycode) {// jaja, obtenga el caso de operación del teclado 37: toleft = true; break;//Cambie las variables y continúe ejecutando el bucle inicial, para que no pueda detener o detener el caso 38: totop = true; break; Caso 39: Toright = True; Break; Caso 40: tobottom = true; break; }}; document.OnKeyUp = function (event) {switch (event.keycode) {case 37: toleft = false; break;//Cambiarme hacia atrás y decirle que se detenga y no mueva el caso 38: totop = false; break; Caso 39: Toright = False; Break; Caso 40: tobottom = falso; ruptura; }}; };De esta manera, hemos completado los requisitos en análisis principales, y al mismo tiempo, podemos mover el DIV hacia arriba, hacia abajo, los botones izquierdo y derecho a través de los botones arriba, hacia abajo, izquierdo y derecho. A continuación, grabemos los lugares sensibles.
1. El DIV debe ser absoluto. No vale la pena después de luchar con esto durante mucho tiempo. Así que revisé y aprendí sobre un concepto "Flojo de documentos".
Por lo general, se dice que el flujo de documentos está dispuesto de arriba a abajo, de izquierda a derecha, entonces este elemento es un elemento de nodo, un gran DOM. Hablemos primero de otras explicaciones. Lo que prefiero es explicar esto: documento + transmisión. Como su nombre indica, el documento significa documentos de la página web, y las transmisiones son métodos de salida. Algunas explicaciones son los métodos de análisis del navegador. Esto parece ser más vívido. Un flujo de documento normal es como un plano, y donde sea que coloque un elemento, es donde está. Flotante, posicionamiento fijo y posicionamiento relativo. Aquí, analizar absoluto es regenerar una corriente, separada de su etiqueta de capa principal, al igual que el índice Z era 0 antes, y el índice Z estaba encima, flotando y arriba, y se puede mover al azar a la izquierda y a la parte superior.
Puedo entender el significado general, pero siento que algunas partes no se pueden expresar de manera efectiva en el lenguaje, y algunos puntos son un poco borrosos. Creo que a medida que se acumula la experiencia, puedo entenderlos más profundamente.
2. El mayúscula de KeyCode, el minúscula de OnKeyUp y OnKeydown también son problemas descubiertos después de probar este lugar. Para JavaScript, cada lugar pequeño es un gran problema;
3. Romper en el interruptor; A menudo me encuentro con este Java, así que no diré mucho
El problema general son los puntos anteriores. ¿Todavía recuerdas las teclas de acceso directo comentado y otras teclas de atajo? Esto tiene un problema. Respondimos a él solo apuntar a una sola clave. Si queremos usar algunas teclas de acceso directo, ¿cómo debemos configurarlo?
Echemos un vistazo al código:
document.OnKeydown = function (event) {// sigue siendo el mismo código que el anterior. ¿Ves la diferencia? VAR Event = Event || Window.event; var bctrl = event.ctrlkey; // aquí switch (event.keycode) {case 37: toleft = true; break; Caso 38: if (bctrl) {obj.style.background = "amarillo"; break;} totop = true; break; // aquí, caso 39: toright = true; break; Caso 40: tobottom = true; break; }};Aquí me encontré con otra propiedad del objeto del evento, que es otro fuera del código clave, CtrlKey o capitalización. Su función principal es verificar el estado de la tecla CTRL. De hecho, hay otros dos similares:
Allkey y ShiftKey son las verificaciones del estado de la tecla ALT y las claves de cambio, respectivamente. De esta manera, sabes cómo establecer una tecla de acceso directo.
De hecho, si lo escribí yo mismo, podría estar satisfecho, pero cuando leo y busco, siempre conozco a mis amigos atentos.
Adjunte el código, ¿sabe qué hacer?
Función Limit () {var doc = [document.documentelement.clientwidth, document.documentelement.clientheight] // prevenir obj.offsetleft <= 0 &&& (<span style = "font-family: arial, Helvetica, sans-serif;"> obj </span> <span style = "font-family: Arial, Helvetica, sans-serif; ">. style.left = 0); </span> // prevenir obj.offsettop <= 0 && (obj.style.top = 0); // prevenir doc [0] en el lado derecho - obj.offsetleft - obj.offsetwidth <= 0 && (obj.style.left = doc [0] - obj.offsetwidth + "px"); // Evite el desbordamiento inferior Doc [1] - obj.offsettop - obj.offsetheight <= 0 && (obj.style.top = doc [1] - obj.offsetheight + "px")}Lo que adjunté aquí es que, si bien el código en Internet está diseñado para evitar el desbordamiento, también quiero alabar este método de escritura. Es mucho más corto de lo que escribo decisivamente. Intentaré escribir más corto en el futuro.