Js keyboard operation to achieve div move or change the principle and code

Yesterday, I recorded the event of getting the value of keyboard keys. With the value, I just do different operations for different values, and I used to write snake before. The result is a clean, it is for a long time of a period of time, so the feeling is necessary to record, on the one hand there is desirable, on the other hand also remind of their own, just realized the function of the head is a stranger, in general, it is to review the old and know the new.

In this way, we will first analyze, to achieve the keyboard operation to achieve the movement of div around the principle of it:

*-- to achieve the move of div, the first most critical point: get the div object

*--- -- drag div out of the document stream, ah, this place missed, went back to look at the snake found, really dizzy

*-- gets the operation of the keyboard

*-- gives different response according to different operation of the keyboard

This is where I think I need to pay attention. Let's look at the code first:

So let's start with the HTML

<div style="width: 50px;height: 50px;background-color: cyan;position: absolute;" id="showZone">

Then record the actual actions of the javascript

window.onload=function(){ 
var obj=document.getElementById("showZone");//So you get the object, that's the easiest thing
var a=10; 
var toLeft=toRight=toTop=toBottom=false;//I'm going to define a couple of Boolean variables for the following directions, four directions

var move=setInterval(function(){//The move definition in this place is actually meaningless, just to make the method a little more obvious
if(toLeft){ 
obj.style.left=parseInt(obj.offsetLeft-a)+"px";//It's better to say parseInt, and because offsetLeft is px free, don't forget "px."
} 
if(toRight){ 
obj.style.left=obj.offsetLeft+a+"px";//It's ok not to write parseInt, because of the order in which javascript is executed? Execute +, then execute +, then execute =? So it turns out to be
} 
if(toTop){ 
obj.style.top=obj.offsetTop-a+"px"; 
} 
if(toBottom){ 
obj.style.top=obj.offsetTop+a+"px"; 
} 
},300); //This is the classic timer, the great wizard of loop execution, 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, continue with the original loop, so you can't 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 it back and let you stop
case 38:toTop=false;break; 
case 39:toRight=false;break; 
case 40:toBottom=false;break; 
} 
}; 
};

In this way, we completed the requirements in the principle analysis, but also can be through up, down, left, right button to achieve the div up and down left and right move, next, to record the sensitive place.

1, div needs to be absolute, for this tangled for a long time is not worth it, so the query, understand a concept of "document flow",

Document flow, usually the elements are arranged from the top down, from left to right, so this element is a node element, a huge dom. Let's start with some other explanations. My favorite one is this: + document flow, document just as its name implies is web documents, and the flow is output, and explained that the browser's analytic approach, this seems to be a little bit image and normal document flow, is like a plane, and where did you put it on an element, where it is, and floating, positioning and relative positioning, absolute, here is to generate a flow out of its parent tag, just like z - before the index is 0, and the z - the index on its top, out of thin air suspension on it, you can freely move it through the left and top.

I can understand the meaning, but I feel that there are still some places that cannot be effectively expressed by language, and some points are a little vague. I believe that with the accumulation of experience, I can understand more deeply.

2. The uppercase here of keyCode, and the lowercase here of onkeyup and onkeydown are also found after testing. For javascript, every small place is a big problem.

3. Break in switch; This Java is often encountered, not much to say

The general question is the above, and do you remember the shortcut keys for the comments, do you remember the other shortcut keys, and there is a problem, we only respond to a single button, if we want to use some shortcut keys, how to set?

Let's look at the code first:

document.onkeydown=function(event){//Let's do 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; 
} 
};

There is another property of the event object, which is outside of the keyCode, ctrlKey, or uppercase ctrlKey. Well, its main function is to check the status of the CTRL key.

The altKey and shiftKey, respectively, check the state of the Alt and shift keys, so you know how to set a shortcut.

In fact, if I write my own words, maybe so I have been very satisfied, but in the search, always can come across thoughtful friends

Attached is the code. Do you know what to do?

function limit(){ 
var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight] 
//Prevent overflow on the left side
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 top overflow
obj.offsetTop <=0 && (obj.style.top = 0); 
//Prevent right side overflow
doc[0] - obj.offsetLeft - obj.offsetWidth <= 0 && (obj.style.left = doc[0] - obj.offsetWidth + "px"); 
//Prevent bottom overflow
doc[1] - obj.offsetTop - obj.offsetHeight <= 0 && (obj.style.top = doc[1] - obj.offsetHeight + "px") 
}

Here I attached is the code on the net in the implementation of the prevention of overflow at the same time, I also want to like this writing method, than I wrote decisively is much, much shorter, later will also try to write short point.