Das Prinzip und der Code zum Verschieben oder Ändern von Divs durch Tastaturbedienung unter Verwendung von js_javascript-Kenntnissen

Gestern haben wir das Ereignis aufgezeichnet, bei dem der Wert der Tastaturtaste abgerufen wurde. Dabei handelt es sich lediglich um unterschiedliche Operationen für unterschiedliche Werte, und es wurde bereits beim Schreiben von Snake verwendet. Die Ergebnisse kamen heraus und es dauerte lange, daher hatte ich das Bedürfnis, sie aufzuzeichnen. Einerseits hat es seine Vorzüge, andererseits erinnerte es mich auch daran, dass die Funktion, die ich gerade implementiert hatte, fremd geworden war Im Allgemeinen kann es als Wiederholen des Alten und Erlernen des Neuen angesehen werden.

Lassen Sie uns zunächst das allgemeine Prinzip des Verschiebens von Divs durch Tastaturoperationen analysieren:

*---Um die Bewegung von div zu realisieren, besteht der erste und kritischste Punkt darin, das div-Objekt zu erhalten

*---Postion: Absolut reißt den Div aus dem Dokumentenfluss. Ich habe ihn erst entdeckt, als ich mir Snake angeschaut habe.

*---Tastaturoperationen abrufen

*---geben Sie je nach Tastaturbedienung unterschiedliche Antworten

Das ist es, woran ich denke und worauf ich achten muss. Schauen wir uns zuerst den Code an:

Zuerst der HTML-Teil

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

Zeichnen Sie dann den tatsächlichen Betrieb von Javascript auf

window.onload=function(){ 
var obj=document.getElementById("showZone");//获取到对象了吧，这最简单 
var a=10; 
var toLeft=toRight=toTop=toBottom=false;//定义几个boolean型变量，是为了后面方向操作用的，看是四个方向吧 

var move=setInterval(function(){//这个地方的move定义实际上毫无意义，只是为了让这个方法更明显一点 
if(toLeft){ 
obj.style.left=parseInt(obj.offsetLeft-a)+"px";//感觉最好还是写上parseInt，另外，因为offsetLeft是不含px的，所以不要忘记“px” 
} 
if(toRight){ 
obj.style.left=obj.offsetLeft+a+"px";//不写parseInt也可以，难道是因为javascript的执行顺序？执行+，再执行+，再执行=？实现结果来看是 
} 
if(toTop){ 
obj.style.top=obj.offsetTop-a+"px"; 
} 
if(toBottom){ 
obj.style.top=obj.offsetTop+a+"px"; 
} 
},300); //这个经典的定时器啊，循环执行的大神器，还记得setInterval和settimeout的区别么 
document.onkeydown=function(event){ 
var event=event||window.event; 
switch(event.keyCode){ //哈哈，获取到键盘操作了吧 
case 37:toLeft=true;break;//改变变量，继续执行最初的循环，不让你停不能停啊 
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;//给我变回来，让你停就别动了 
case 38:toTop=false;break; 
case 39:toRight=false;break; 
case 40:toBottom=false;break; 
} 
}; 
};

Auf diese Weise haben wir die Anforderungen in der Prinzipanalyse erfüllt und können gleichzeitig das Div über die Schaltflächen „Nach oben“, „Nach unten“, „Links“ und „Rechts“ nach oben, unten, links und rechts verschieben. Lassen Sie uns die sensiblen Orte aufzeichnen.

1. Das Div muss absolut sein. Es hat sich lange nicht gelohnt, darüber nachzudenken, also habe ich etwas über das Konzept des „Dokumentenflusses“ gelernt

Dokumentfluss bedeutet normalerweise, dass Elemente von oben nach unten und von links nach rechts angeordnet sind. Dann ist dieses Element ein Knotenelement, ein riesiger Dom. Lassen Sie uns zunächst über andere Erklärungen sprechen: „Dokumentfluss“ bezieht sich, wie der Name schon sagt, auf die Ausgabemethode des Browsers Um es anschaulicher auszudrücken: Der normale Dokumentfluss ist wie eine Ebene, und ein Element wird schwebend, mit fester Positionierung und relativer Positionierung, hier mit absoluter Analyse, neu generiert, nachdem es von seinem übergeordneten Etikett getrennt wurde , es ist, als ob der Z-Index zuvor 0 wäre und dieser Z-Index darüber liegt. Wenn er darüber hängt, können Sie ihn beliebig nach links und oben verschieben.

Ich kann die Bedeutung wahrscheinlich verstehen, aber ich habe immer noch das Gefühl, dass es einige Teile gibt, die nicht effektiv in Worte gefasst werden können, und einige Punkte sind etwas vage. Ich glaube, dass ich sie mit der Ansammlung von Erfahrung besser verstehen kann.

2. Die Großbuchstaben in keyCode und die Kleinbuchstaben in onkeyup und onkeydown sind Probleme, die erst nach dem Testen entdeckt werden. Für JavaScript ist jede kleine Stelle ein großes Problem

3. Break-in-Schalter; dies kommt in Java häufig vor, daher werde ich nicht auf Details eingehen

Das allgemeine Problem sind die oben genannten Punkte. Erinnern Sie sich noch an andere Tastenkombinationen? Die obige Antwort bezieht sich nur auf eine einzelne Taste über einige Tastenkombinationen?

Werfen wir zunächst einen Blick auf den Code:

document.onkeydown=function(event){//还是跟上面差不多的代码吧，你看出不同在哪里了么 
var event=event||window.event; 
var bctrl=event.ctrlKey;//在这里 
switch(event.keyCode){ 
case 37:toLeft=true;break; 
case 38:if(bctrl){obj.style.background="yellow";break;}toTop=true;break;//在这里， 
case 39:toRight=true;break; 
case 40:toBottom=true;break; 
} 
};

Hier stoßen wir auf ein weiteres Attribut des Ereignisobjekts, bei dem es sich neben keyCode um ein weiteres Attribut handelt, das immer noch in Großbuchstaben geschrieben ist. Seine Hauptfunktion besteht darin, den Status der Strg-Taste zu überprüfen. Tatsächlich gibt es zwei solcher Attribute:

AltKey und ShiftKey dienen dazu, den Status der Alt-Taste bzw. der Shift-Taste zu überprüfen, damit Sie wissen, wie Sie eine Tastenkombination festlegen.

Eigentlich wäre ich vielleicht sehr zufrieden gewesen, wenn ich es selbst geschrieben hätte, aber beim Stöbern und Suchen konnte ich immer nachdenkliche Freunde treffen

Anbei ist der Code, wissen Sie, was zu tun ist:

function limit(){ 
var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight] 
//防止左侧溢出 
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> 
//防止顶部溢出 
obj.offsetTop <=0 && (obj.style.top = 0); 
//防止右侧溢出 
doc[0] - obj.offsetLeft - obj.offsetWidth <= 0 && (obj.style.left = doc[0] - obj.offsetWidth + "px"); 
//防止底部溢出 
doc[1] - obj.offsetTop - obj.offsetHeight <= 0 && (obj.style.top = doc[1] - obj.offsetHeight + "px") 
}

Was ich hier anfüge, ist der Code im Internet, aber ich möchte auch diese Schreibmethode loben. Sie ist viel kürzer als die, die ich in Zukunft geschrieben habe.