Ontem gravei o evento de obter o valor da tecla do teclado. Com o valor, nada mais é do que fazer operações diferentes para valores diferentes. Eu também usei antes quando escrevo sobre cobras gananciosas. Como resultado, demorou muito tempo para gravá -lo, então senti que era necessário gravá -lo. Por um lado, havia de fato algo bom e, por outro lado, também me lembrei que a função que acabei de perceber era um estranho novamente. Em geral, foi considerado uma revisão do passado e aprender o novo.
Vamos primeiro analisar o princípio geral de implementar operações de teclado para realizar o movimento DIV:
*--- Para perceber o movimento da div, o ponto mais importante é obter o objeto div
*--- Posção: Absolute arrasta a div completamente para fora do fluxo de documentos. Este lugar é perdido. Eu só encontrei depois de voltar para ver a cobra gananciosa. É tão tonto.
*--- a operação de obter o teclado
*--- Dê respostas diferentes de acordo com diferentes operações de teclado
É disso que acho que provavelmente preciso prestar atenção, vamos ver o código primeiro:
Primeiro, a parte HTML
<div id = "ShowZone">
Em seguida, registre a operação real do JavaScript
window.onload = function () {var obj = document.getElementById ("ShowZone"); // O objeto foi obtido, este é o var a = 10 mais simples; var toleft = Toright = totop = TOBOTTOM = false; // Defina várias variáveis booleanas para a operação de direção subsequente, e parece ser quatro direções var move = setInterval (function () {// A definição de mover neste local não tem sentido, apenas para tornar este método mais óbvio (toleft) {obj.stylefleft. Parece melhor escrever parsento. obj.style.top = obj.offsettop-a+"px"; // Este timer clássico é uma ótima ferramenta para execução de loop. Você ainda se lembra da diferença entre o setInterval e o setTimeout document.onkeydown = function (event) {var event = event || window.event; switch (event.keycode) {// haha, obtenha o estojo de operação do teclado 37: toleft = true; quebrar; // altere as variáveis e continue a executar o loop inicial, para que você não possa parar ou parar o caso 38: totop = true; quebrar; Caso 39: Toright = true; quebrar; Caso 40: Tobottom = true; quebrar; }}; document.onkeyup = function (event) {switch (event.keycode) {case 37: toleft = false; break; // altere -me de volta e peça para você parar e não mover o caso 38: totop = false; break; Caso 39: Toright = false; quebrar; Caso 40: Tobottom = false; quebrar; }}; };Dessa forma, concluímos os requisitos em análise de princípios e, ao mesmo tempo, podemos mover os botões Div para cima, para baixo, para a esquerda e direita através dos botões para cima, para baixo, para a esquerda e direita. Em seguida, vamos gravar os lugares sensíveis.
1. A div precisa ser absoluta. Não vale a pena depois de lutar com isso por um longo tempo. Então, verifiquei e aprendi sobre um conceito "fluxo de documentos".
Diz -se que o fluxo de documentos é organizado de cima para baixo, da esquerda para a direita, então esse elemento é um elemento do nó, um enorme DOM. Vamos falar sobre outras explicações primeiro. O que eu prefiro é explicar isso: documento + fluxo. Como o nome sugere, o documento significa documentos da página da web e os fluxos são métodos de saída. Algumas explicações são métodos de análise do navegador. Isso parece ser mais vívido. Um fluxo normal de documentos é como um avião e, onde quer que você coloque um elemento, é onde está. Flutuante, posicionamento fixo e posicionamento relativo. Aqui, a análise do absoluto é regenerar um fluxo, separado do rótulo da camada pai, assim como o Z-Index era 0 antes, e o índice Z estava no topo, flutuando e superior, e pode ser movido aleatoriamente pela esquerda e superior.
Eu posso entender o significado geral, mas sinto que algumas partes não podem ser expressas efetivamente na linguagem, e alguns pontos são um pouco embaçados. Acredito que, à medida que a experiência se acumula, posso entendê -los mais profundamente.
2. A maçaneta do código -chave, a minúscula de OnkeyUp e OnKeyDown também são problemas descobertos após o teste deste local. Para JavaScript, todo lugar pequeno é um grande problema;
3. Quebrar no interruptor; Costumo encontrar este java, então não vou dizer muito
O problema geral são os pontos acima. Você ainda se lembra das chaves de atalho comentadas e outras teclas de atalho? Isso tem um problema. Nós respondemos a ele apenas visar uma única chave. Se queremos usar algumas teclas de atalho, como devemos defini -las?
Vamos dar uma olhada no código:
document.onkeydown = function (evento) {// ainda é o mesmo código acima. Você vê a diferença? var evento = evento || window.event; var bctrl = event.ctrlkey; // aqui switch (event.keycode) {case 37: toleft = true; break; caso 38: if (bctrl) {obj.style.background = "amarelo"; quebrar;} totop = true; break; // aqui, caso 39: toright = true; quebrar; Caso 40: Tobottom = true; quebrar; }};Aqui, encontrei outra propriedade do objeto de evento, que é outro fora do código de chave, Ctrlkey ou capitalização. Sua principal função é verificar o status da tecla Ctrl. De fato, existem outros dois tal:
Altkey e ShiftKey são os cheques sobre o status das teclas Alt e Shift, respectivamente. Dessa forma, você sabe como definir uma chave de atalho.
De fato, se eu escrevi sozinho, posso estar satisfeito, mas quando leio e pesquiso, sempre conheço meus amigos atenciosos.
Anexe o código, você sabe o que fazer:
função limite () {var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight] // impedir obj.offsetleft <= 0 && (<span style = "font-family: arial, helvetica, sans-sef; = 0); </span> // evidence obj.offsettop <= 0 && (obj.style.top = 0); // impedir o documento [0] no lado direito - obj.offsetleft - obj.offsetWidth <= 0 && (obj.style.left = doc [0] - obj.offsetWidth + "px"); // Prevenido o Doc do fundo inferior [1] - obj.offsetTop - obj.offsetheight <= 0 && (obj.style.top = doc [1] - obj.offsetheight + "px")}O que eu anexei aqui é que, embora o código na Internet tenha sido projetado para evitar transbordamento, também quero elogiar este método de escrita. É muito mais curto do que o que escrevo decisivamente. Vou tentar escrever mais curto no futuro.