js_javascriptスキルを使ったキーボード操作でdivを移動・変更する原理とコード

昨日、キーボードのキーの値を取得するイベントを記録しましたが、その値については、異なる値に対して異なる操作を行うだけであり、以前に Snake を作成するときに使用されました。結果的に時間がかかったので記録する必要性を感じている一方で、実装したばかりの機能がまた見覚えのないものになってしまったということを思い出します。一般に、それは古いものを見直し、新しいものを学ぶことであると考えることができます。

まず、キーボード操作による div の移動の一般原則を分析してみましょう:

*---div の動きを実現するには、最初で最も重要なポイントは div オブジェクトを取得することです

*---位置: Absolute は div をドキュメント フローから完全にドラッグします。私は、戻って Snake を見て初めて気づきました。とてもめまいがします。

*---キーボード操作を取得します

*---キーボード操作の違いに応じて異なる応答を返します

ここに注意する必要があると思います。まずコードを見てみましょう。

まず HTML 部分

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

次に、実際の 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; 
} 
}; 
};

このようにして、原理分析の要件が完了しました。同時に、上下左右のボタンを使用して div を上下左右に移動できます。敏感な場所を記録します。

1. div は絶対である必要があります。これについて長い間心配する必要はなかったので、少し調べて「ドキュメント フロー」の概念について学びました。

文書の流れは通常、要素が上から下、左から右に配置されていると言われ、この要素がノード要素、つまり巨大な dom になります。最初に他の説明について説明します。ドキュメント フローは、その名前が示すように Web ドキュメントを指し、フローはブラウザの解析方法であると説明されているようです。もっと分かりやすく言えば、通常のドキュメントの流れは平面のようなもので、要素はフローティング、固定配置、相対配置に関して、フローから切り離されて再生成されることを意味します。親ラベルでは、以前は z-index が 0 だったかのようになり、この z-index がその上にある場合は、左と上に任意に移動できます。

意味はなんとなく理解できるのですが、言葉ではうまく表現できない部分や、曖昧な部分もあり、経験を積むことでより深く理解できるようになると思います。

2. keyCode の大文字と onkeyup および onkeydown の小文字は、JavaScript ではテスト後にのみ発見されます。

3. ブレークインスイッチ。これは Java で頻繁に発生するため、詳細は説明しません

一般的な問題は、上記の点です。コメントのショートカット キーを覚えていますか? これは、What を使用したい場合の質問です。ショートカットキーの設定方法について教えてください。

まずコードを見てみましょう:

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

ここで、イベント オブジェクトの別の属性が表示されます。これは、keyCode 以外の別の属性、ctrlKey ですが、その主な機能は、ctrl キーのステータスを確認することです。実際、そのような属性は
です。

altKeyとshiftKeyは、それぞれaltキーとshiftキーの状態を確認するためのもので、ショートカットキーの設定方法がわかります。

実際、自分で書いていたらとても満足したかもしれませんが、閲覧したり検索したりしていると、いつでも思いやりのある友達に出会うことができました

コードを添付します。何をすればよいかわかりますか:

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

ここに添付するのは、オーバーフローを防ぎつつ、私が書いた決定的なものよりもはるかに短いコードであることを賞賛したいと思います。