昨日、キーボードキーの値を取得するイベントを記録しました。値を使用すると、異なる値に対して異なる操作を行うことにすぎません。貪欲なヘビについて書く前にも前に使用しました。その結果、記録するのに長い時間がかかったので、記録する必要があると感じました。一方では、確かに何か良いものがあり、他方では、私が気づいた機能が再び見知らぬ人であることを思い出しました。一般に、それは過去のレビューであり、新しいことを学ぶと考えられていました。
まず、キーボード操作を実装してDIVの動きを実現するという一般原則を分析しましょう。
*--- divの動きを実現するために、最も重要なポイントはdivオブジェクトを取得することです
*--- Posion：Absoluteは、ドキュメントストリームからDivを完全にドラッグします。この場所は見逃されています。貪欲なヘビを見るために戻った後にのみ見つけました。とてもめまいです。
*---キーボードを取得する操作
*---さまざまなキーボード操作に従って異なる応答を提供します
これは私がおそらく注意を払う必要があると思うものです。最初にコードを見てみましょう。
まず、HTMLパーツ
<div id = "showzone">
次に、JavaScriptの実際の操作を記録します
window.onload = function（）{var obj = document.getElementById（ "showzone"）; //オブジェクトが取得されました、これは最も単純なvar a = 10; var toleft = toright = topop = tobottom = false; //後続の方向操作のためにいくつかのブール変数を定義し、4つの方向のように見えます。 Parseintを書く方が良いと感じています。 obj.style.top = obj.offsettop-a+"px"} {obj.style.top = obj.offsettop+a+"px}、300）; //このクラシックタイマーは、ループ実行に最適なツールです。 SetIntervalとsetimeout document.onkeydown = function（event）{var event = event || window.event; switch（event.keycode）{// haha、キーボード操作ケースを取得します37：toleft = true; //変数を変更して初期ループを実行し続けるため、ケース38：totop = true; break;ケース39：toright = true; break;ケース40：tobottom = true; break; }}; document.onkeyup = function（event）{switch（event.keycode）{case 37：toleft = false; //私を戻して、停止して移動しないように言ってください38：topop = false; break;ケース39：toright = false; break;ケース40：tobottom = false; break; }}; };このようにして、原則的な分析で要件を完了しました。同時に、Divを上、下、左、右のボタンを上、下、左、右のボタンを介して移動できます。次に、繊細な場所を記録しましょう。
1. Divは絶対にする必要があります。これに長い間苦労した後、それだけの価値はありません。そこで、「ドキュメントフロー」という概念を確認して学びました。
ドキュメントの流れは通常、上から左から右に配置されていると言われています。この要素は、ノード要素、巨大なDOMです。最初に他の説明について話しましょう。私が好むのは、これを説明することです：ドキュメント +ストリーム。名前が示すように、ドキュメントはWebページドキュメントを意味し、ストリームは出力方法です。いくつかの説明は、ブラウザ分析方法です。これはより鮮明に思われます。通常のドキュメントの流れは平面のようなものであり、要素を置くところはどこでも、それがどこにあるかです。フローティング、固定ポジショニング、相対的なポジショニング。ここで、絶対的な分析は、Z-indexが0の前にあるように、親層ラベルから分離されたストリームを再生することであり、Z-Indexはその上に浮かんでいて、左と上部からランダムに移動できます。
私は一般的な意味を理解することができますが、一部の部分は言語で効果的に表現することはできず、いくつかのポイントは少しぼやけています。私は、経験が蓄積するにつれて、それらをより深く理解できると信じています。
2。キーコードの大文字、OnKeyupの小文字、OnKeyDownも、この場所をテストした後に発見された問題でもあります。 JavaScriptにとって、すべての小さな場所は大きな問題です。
3。スイッチの破損。私はしばしばこのジャワに出会うので、あまり言いません
一般的な問題は上記のポイントです。コメントされたショートカットキーやその他のショートカットキーをまだ覚えていますか？これには問題があります。単一のキーのみをターゲットにしました。ショートカットキーを使用したい場合、どのように設定する必要がありますか？
コードを見てみましょう：
document.onkeydown = function（event）{//上記と同じコードです。違いが見えますか？ var event = event || window.event; var bctrl = event.ctrlkey; // here switch（event.keycode）{case 37：toleft = true; break;ケース38：if（bctrl）{obj.style.background = "yellow"; break;} top = true; break; // case 39：toright = true; break; break;ケース40：tobottom = true; break; }};ここでは、イベントオブジェクトの別のプロパティに遭遇しました。これは、キーコード、ctrlkey、または大文字の外側の別のプロパティです。その主な機能は、CTRLキーのステータスを確認することです。実際、他には2つあります。
AltkeyとShiftKeyは、それぞれAltキーとシフトキーのステータスのチェックです。これにより、ショートカットキーを設定する方法を知っています。
実際、自分で書いた場合、私は満足するかもしれませんが、読んで検索するとき、私はいつも思慮深い友人に会います。
コードを添付してください、あなたは何をすべきか知っていますか：
function limit（）{var doc = [document.documentelement.clientwidth、document.documentelement.clientheight] // obj.offsetleft <= 0 &&（<span style = "font-family：arial、helvetica、sans-serif;"> obj </span <span = " 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"）; //ボトムオーバーフロードキュメント[1] - obj.offsettop -obj.offsetheight <= 0 &&（obj.style.top = doc [1] -obj.offseTheight + "px"）}}ここで添付したのは、インターネット上のコードがオーバーフローを防ぐように設計されている間、この執筆方法を賞賛したいということです。それは私が決定的に書いているものよりもはるかに短いです。私は将来短く書こうとします。