Yesterday I recorded the event of getting the value of the keyboard key. With the value, it is nothing more than doing different operations for different values. I have also used it before when writing about greedy snakes. As a result, it took a long time to record it, so I felt that it was necessary to record it. On the one hand, there were indeed something good, and on the other hand, I also reminded myself that the function I just realized was a stranger again. In general, it was considered to be a review of the past and learn the new.
Let’s first analyze the general principle of implementing keyboard operations to realize div movement:
*---To realize the movement of div, the most important point is to obtain the div object
*---postion: absolute drags the div completely out of the document stream. This place is missed. I only found it after going back to see the greedy snake. It's so dizzy.
*---The operation of obtaining the keyboard
*---Give different responses according to different keyboard operations
This is what I think of probably need to pay attention to, let’s look at the code first:
First, the html part
<div id="showZone">
Then record the actual operation of javascript
window.onload=function(){ var obj=document.getElementById("showZone");//The object has been obtained, this is the simplest var a=10; var toLeft=toRight=toTop=toBottom=false;//Define several boolean variables for the subsequent direction operation, and it seems to be four directions var move=setInterval(function(){//The move definition in this place is actually meaningless, just to make this method more obvious if(toLeft){ obj.style.left=parseInt(obj.offsetLeft-a)+"px";//It feels better to write parseInt. In addition, because offsetLeft does not contain px, don't forget "px" } if(toRight){ obj.style.left=obj.offsetLeft+a+"px";//It is OK to not write parseInt, is it because of the execution order of javascript? Execute +, then execute +, then execute =? The result is } if(toTop){ obj.style.top=obj.offsetTop-a+"px"; } if(toBottom){ obj.style.top=obj.offsetTop+a+"px"; } },300); //This classic timer is a great tool for loop execution. Do you still remember the difference between setInterval and settimeout document.onkeydown=function(event){ var event=event||window.event; switch(event.keyCode){ //Haha, get the keyboard operation case 37:toLeft=true;break;//Change the variables and continue to execute the initial loop, so that you can't stop or stop case 38:toTop=true;break; case 39:toRight=true;break; case 40:toBottom=true;break; } }; document.onkeyup=function(event){ switch(event.keyCode){ case 37:toLeft=false;break;//Change me back and tell you to stop and don’t move case 38:toTop=false;break; case 39:toRight=false;break; case 40:toBottom=false;break; } }; };In this way, we have completed the requirements in principle analysis, and at the same time, we can move the div up, down, left and right buttons through the up, down, left and right buttons. Next, let’s record the sensitive places.
1. The div needs to be absolute. It is not worth it after struggling with this for a long time. So I checked and learned about a concept "document flow".
Document flow is usually said to be arranged from top to bottom, from left to right, then this element is a node element, a huge dom. Let’s talk about other explanations first. What I prefer is to explain this: Document + Stream. As the name suggests, the document means web page documents, and streams are output methods. Some explanations are browser analysis methods. This seems to be a more vivid. A normal document flow is like a plane, and wherever you put an element, it is where it is. Floating, fixed positioning and relative positioning. Here, analyzing absolute is to regenerate a stream, separated from its parent layer label, just like z-index was 0 before, and the z-index was on top of it, floating and top, and it can be moved randomly through left and top.
I can understand the general meaning, but I feel that some parts cannot be expressed effectively in language, and some points are a little blurred. I believe that as the experience accumulates, I can understand them more deeply.
2. The uppercase of keyCode, the lowercase of onkeyup and onkeydown are also problems discovered after testing this place. For JavaScript, every small place is a big problem;
3. Break in switch; I often encounter this Java, so I won’t say much
The general problem is the above points. Do you still remember the commented shortcut keys and other shortcut keys? This has a problem. We responded to it only target a single key. If we want to use some shortcut keys, how should we set it?
Let's take a look at the code:
document.onkeydown=function(event){//It's still the same code as above. Do you see the difference? var event=event||window.event; var bctrl=event.ctrlKey;//Here switch(event.keyCode){ case 37:toLeft=true;break; case 38:if(bctrl){obj.style.background="yellow";break;}toTop=true;break;//Here, case 39:toRight=true;break; case 40:toBottom=true;break; } };Here I encountered another property of the event object, which is another one outside keyCode, ctrlKey, or capitalization. Its main function is to check the status of the ctrl key. In fact, there are two other such:
altKey and shiftKey are the checks on the status of the alt key and shift keys respectively. This way, you know how to set a shortcut key.
In fact, if I wrote it myself, I might be satisfied, but when I read and search, I always meet my thoughtful friends.
Attach the code, do you know what to do:
function limit(){ var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight] //Prevent 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> //Prevent obj.offsetTop <=0 && (obj.style.top = 0); //Prevent doc[0] on the right side - obj.offsetLeft - obj.offsetWidth <= 0 && (obj.style.left = doc[0] - obj.offsetWidth + "px"); //Prevent the bottom overflow doc[1] - obj.offsetTop - obj.offsetHeight <= 0 && (obj.style.top = doc[1] - obj.offsetHeight + "px") }What I attached here is that while the code on the Internet is designed to prevent overflow, I also want to praise this writing method. It is much shorter than what I write decisively. I will try to write shorter in the future.