ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript 拡張チュートリアル - DOM プログラミング (div の移動を制御する 2 つの方法)
JavaScript 拡張チュートリアル - DOM プログラミング (div の移動を制御する 2 つの方法)
- 黄舟オリジナル
- 2017-01-21 16:21:111259ブラウズ
最初のボタンコントロール
最初に2つのHTMLボタンとdivを作成し、divにスタイルを与えます
input type="button" value="左" id="1">
<input type="button" value="右" id="2">
<div id="3">
div {
width: 100px;
height: 100px;
background-color: bisque;
position: absolute;
left: 100px;
top: 100px;
}次にスクリプトでdivと2つのボタンを取得します
var left = document.getElementById("2");
var right = document.getElementById("1");
var div = document.getElementById("3");次にonclick関数を追加します
left.onclick = function () {
}
right.onclick = function () {
}変数を設定します、 div の左変更を制御 var x = 100;ボタンがクリックされたときに
left.onclick = function () {
x=x+10;
div.style.left = x+"px";
}
right.onclick = function () {
x=x-10;
div.style.left = x+"px";
}をトリガーする ソースコード: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div { width: 100px; height: 100px; background-color: bisque;
position: absolute; left: 100px; top: 100px; }
</style>
</head>
<body>
<input type="button" value="左" id="1"> <input type="button" value="右" id="2"> <div id="3"> </div>
<script>
var left = document.getElementById("2"); var right = document.getElementById("1");
var div = document.getElementById("3");
var x = 100;
left.onclick = function () { x=x+10; div.style.left = x+"px";
} right.onclick = function () { x=x-10; div.style.left = x+"px"; }
</script>
</body>
</html>2番目、キー値制御
同様にHTMLでdivを作成し、それにスタイルを与える
<div id="3">
</div>
<style>
div {
width: 100px;
height: 100px;
background-color: bisque;
position: absolute;
left: 100px;
top: 100px;
}
</style>divを取得するスクリプト
var div=document.getElementById("3");次に、divの左と上の変更を制御する2つの変数を宣言します
var px=100; var py =100;
次に、キー値
document.onkeydownを取得します(ドキュメントドキュメントオブジェクトで、任意のキーを押すとこの関数がトリガーされます)
イベント。アラートで出力される keyCode 対応するキーが押されると、現在のキーに対応するイベント値 (つまり、各キーがキー値に対応します)
document.onkeydown = function(){
alert(event.keyCode);
}その後、上、下、左をテストしてキーの値を取得します、右に移動し、swich ステートメント内の div の左と上を変更して位置を変更します
switch (event.keyCode){
case 37:
px = px-10;
div.style.left = px+"px";
break;
case 38:
py = py-10;
div.style.top = py+"px";
break;
case 39:
px = px+10;
div.style.left = px+"px";
break;
case 40:
py = py+10;
div.style.top = py+"px";
break;
}ソースコード:
Title
<script>
var div=document.getElementById("3");
var px=100;
var py =100;
document.onkeydown = function(){
// alert(event.keyCode);
switch (event.keyCode){ case 37: px = px-10;
div.style.left = px+"px"; break; case 38:
py = py-10; div.style.top = py+"px"; break;
case 39: px = px+10; div.style.left = px+"px";
break; case 40: py = py+10; div.style.top = py+"px"; break; }
}
</script>
上記は、JavaScript 拡張チュートリアル - DOM プログラミングの内容です ( div の移動を制御する 2 つの方法) その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。