JS to implement keyboard operation on the DIV movement or change-------Day43

"Where dad go" is said to be in the second quarter of the volume, a little look forward to, do not know this season of the baby will be how cute, but also sweet to the bottom of my heart,
Haha, remember the wind-like woman, do not know how she is now.

Anyway, continue today's record, actually at the beginning of the time, I thought I can quickly realize this function, after all, yesterday recorded the keys to get the value of the event, there is a value, nothing more than to do different operations for different values, but also used to write a snake. The results of a adjusting supervised, is a long time, so it is necessary to note that the need to record, on the one hand there is merit, on the other hand, on their own reminders, just realized the function of the head is a stranger, in general, it is warm to know the new bar.

So we first analyze, to achieve the keyboard operation to achieve the principle of the div movement:

*---to realize the movement of the Div, the first key point: Get the Div object

*---postion:absolute the div completely from the flow of the document, Ah, this place is missing, go back to see the snake just found, really faint

*---Get the keyboard operation

*---Different responses according to the different operation of the keyboard

This is what I think about the need to pay attention to the place, or first look at the code:

First, the HTML section.

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

Then record the actual operation of JavaScript

Window.onload=function () {var Obj=document.getelementbyid ("Showzone");//Get to the object, this is the simplest var a=10;var toleft=toright= totop=tobottom=false;//defines a few Boolean variables, which are used for the latter direction, see Four directions var move=setinterval (function () {//The move definition of this place is actually meaningless, Just to make this method more obvious a little if (toleft) {obj.style.left=parseint (obj.offsetleft-a) + "px";//feel best to write parseint, in addition, Because Offsetleft does not contain PX, so do not forget "px"}if (toright) {obj.style.left=obj.offsetleft+a+ "px";//Do not write parseint can also, Is it because of the JavaScript execution order? Execute +, then execute +, then execute =? The result of the implementation is}if (totop) {obj.style.top=obj.offsettop-a+ "px";}  if (tobottom) {obj.style.top=obj.offsettop+a+ "px";}},300); This classic timer Ah, loop execution of the big artifact, remember the difference between SetInterval and settimeout document.onkeydown=function (event) {var event=event| | Window.event;switch (Event.keycode) {//Haha, get to the keyboard operation of the case 37:toleft=true;break;//change the variable, continue to perform the initial loop, do not let you stop it. 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;//give me back, let you stop don't move, case 38:totop= False;break;case 39:toright=false;break;case 40:tobottom=false;break;};}; 

In this way, we completed the principle of the analysis of the requirements, but also can be done by the top, bottom, left, right button to achieve a div up and down around the move, then, then to record the sensitive place it.

1, Div needs to be absolute, for this tangled half a day is really not worth, so query the next, understand a concept of "document Flow",

The document Flow , which is usually the element from top to bottom, from left to right, then this element is the node element, the huge DOM ah. Or first of all, I would like to explain the other, I prefer to elaborate: Document + flow, the document as its name implies that the Web document, and the flow is the output way, and some explanation is the browser's analytic way, this looks more image a little, normal document flow, it is like a plane, and an element where you put it, Where it is, and floating, fixed positioning and relative positioning, here to analyze absolute, is to regenerate a stream, out of its parent layer label, as if before the Z-index is 0, and this z-index on top of it, suspended from the top of it, can be left, Top to move it wantonly.

Probably the meaning can understand, but some places still can not be effective in the language to express, and some points slightly somewhat vague, I believe that with the accumulation of experience, I understand more deeply.

2,keycode here capitalization, onkeyup and onkeydown here in the lowercase, in this place is also tested under the problem, for JavaScript, every small place is a big problem ah;

3, switch in the break; This Java is often encountered, not much to say

Probably the problem is the above points, and you remember the shortcut keys, remember the other shortcut keys, which arises a problem, the above response we just for a single button, if we want to use some shortcut keys, how to set it?

First look at the code:

Document.onkeydown=function (Event) {//or similar code as above, do you see where the difference is? 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 we come across. Another property of the event object, is another outside the KeyCode, Ctrlkey, or uppercase Oh, its main function is to check the state of the CTRL key, in fact, there are still two:

Altkey and Shiftkey, respectively, are the ALT key and the SHIFT key state check, so you know how to set a shortcut key.

In fact, if I wrote it myself, I might have been satisfied, but when I looked through the search, I always met a thoughtful friend.

With the code, do you know what to do:

function limit () {var doc = [Document.documentElement.clientWidth, document.documentelement.clientheight]// Prevent left overflow 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 overflow doc[0]- Obj.offsetleft-obj.offsetwidth <= 0 && (obj.style.left = doc[0]-obj.offsetwidth + "px");//Prevent bottom overflow doc[1]-ob J.offsettop-obj.offsetheight <= 0 && (obj.style.top = doc[1]-obj.offsetheight + "px")}

Here I enclose the code on the net to implement Prevent overflowAt the same time, I would like to praise this writing, than I write the decisive to be a lot shorter, but also to try to write a short point.

All right, let's get here today, I have to work overtime tomorrow, I don't know if it will rain. A warm heart, they both actually like me.