Le principe et le code du déplacement ou de la modification des div via le clavier en utilisant les compétences js_javascript

Hier, nous avons enregistré l'événement d'obtention de la valeur de la touche du clavier. Avec la valeur, ce n'est rien de plus que de faire différentes opérations pour différentes valeurs, et cela a déjà été utilisé lors de l'écriture de Snake. Les résultats sont sortis, et cela a pris beaucoup de temps, donc j'ai ressenti le besoin de l'enregistrer. D'une part, cela a des mérites, et d'autre part, cela m'a aussi rappelé que la fonction que je venais de mettre en œuvre est devenue une inconnue. encore une fois, en général, cela peut être considéré comme une révision de l'ancien et l'apprentissage du nouveau.

Analysons d'abord le principe général du déplacement des divs via des opérations au clavier :

*---Pour réaliser le mouvement de div, le premier et le plus critique est d'obtenir l'objet div

*---postion : Absolute fait sortir complètement le div du flux de documents. J'ai raté cet endroit, je ne l'ai découvert que lorsque je suis revenu et que j'ai regardé Snake, j'ai tellement le vertige

.

*---Obtenir les opérations du clavier

*---donner des réponses différentes selon les différentes opérations du clavier

C'est ce à quoi je pense et ce à quoi je dois prêter attention. Regardons d'abord le code :

D'abord la partie html

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

Enregistrez ensuite le fonctionnement réel de javascript

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; 
} 
}; 
};

De cette façon, nous avons rempli les exigences de l'analyse principale, et en même temps, nous pouvons déplacer le div vers le haut, le bas, la gauche et la droite via les boutons haut, bas, gauche et droite. enregistrons les endroits sensibles.

1. Le div doit être absolu. Cela ne valait pas la peine de s'en soucier pendant longtemps, alors je l'ai recherché et j'ai découvert le concept de "flux de documents",

On dit généralement que le flux de documents est que les éléments sont disposés de haut en bas et de gauche à droite, alors cet élément est un élément nœud, un énorme dom. Parlons d'abord d'autres explications. Je préfère l'expliquer comme ceci : le flux de documents, comme son nom l'indique, fait référence aux documents Web, et le flux est la méthode de sortie. Certaines explications disent que c'est la méthode d'analyse du navigateur. être plus Pour le dire plus clairement, le flux de documents normal est comme un plan, et un élément sera là où vous le placez. Flottant, positionnement fixe et positionnement relatif, analysant ici l'absolu, régénérez un flux après avoir été séparé de son étiquette parent. , c'est comme si le z-index était 0 auparavant, et que ce z-index était au-dessus de lui. S'il est suspendu au-dessus, vous pouvez le déplacer arbitrairement vers la gauche et le haut.

Je peux probablement comprendre le sens, mais j'ai toujours l'impression qu'il y a certaines parties qui ne peuvent pas être exprimées efficacement avec des mots, et certains points sont légèrement vagues. Je crois qu'avec l'accumulation d'expérience, je peux le comprendre plus profondément.

2. Les lettres majuscules dans keyCode et les lettres minuscules dans onkeyup et onkeydown sont des problèmes découverts seulement après les tests. Pour JavaScript, chaque petit endroit est un gros problème ;

3. Break in switch ; ceci est souvent rencontré en Java, je n'entrerai donc pas dans les détails

Le problème général concerne les points ci-dessus, et vous souvenez-vous encore des touches de raccourci pour les commentaires ? Vous souvenez-vous d'autres touches de raccourci ? Cela soulève une question. La réponse ci-dessus concerne uniquement une seule touche. à propos de certaines touches de raccourci ? Comment les définir ?

Jetons d'abord un coup d'œil au 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; 
} 
};

Ici, nous rencontrons un autre attribut de l'objet événement, qui est un autre attribut en plus de keyCode, ctrlKey, toujours en majuscules. Sa fonction principale est de vérifier l'état de la touche ctrl. En fait, il existe deux de ces attributs :
.

altKey et shiftKey servent respectivement à vérifier l'état de la touche alt et de la touche maj, afin que vous sachiez comment définir une touche de raccourci.

En fait, si je l'avais écrit moi-même, j'aurais peut-être été très satisfait, mais lorsque je parcourais et cherchais, je pouvais toujours rencontrer des amis attentionnés

Ci-joint le code, savez-vous quoi faire :

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") 
}

Ce que je joins ici, c'est le code sur Internet. Tout en évitant les débordements, je tiens également à saluer cette méthode d'écriture. Elle est beaucoup plus courte que celle décisive que j'ai écrite à l'avenir.