この記事では、JSによるDIVの動きを制御するキーボードを実装する方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
CSSスタイルの部分：
次のようにコードをコピーします。<style type = "text/css">
html、body {overflow：hidden;}
ボディ{マージン：0;パディング：0;}
pre {color：緑;パディング：10px 15px;背景：＃f0f0f0;境界線：1px点線＃333;フォント：12px/1.5クーリエNEW;マージン：12px;}
span {color：＃999;}
＃box {position：absolute; top：50px; left：300px; width：100px; height：100px; background：red;}
</style>
JSパート：
次のようにコードをコピーします。<script type = "text/javascript">
window.onload = function（）
{
var obox = document.getElementById（ "box"）;
var bleft = btop = bright = bbottom = bctrlkey = false;
setInterval（function（）
{
if（bleft）
{
obox.style.left = obox.offsetleft -10 + "px"
}
else if（明るい）
{
obox.style.left = obox.offsetleft + 10 + "px"
}
if（btop）
{
obox.style.top = obox.offsettop -10 + "px"
}
else if（bbottom）
{
obox.style.top = obox.offsettop + 10 + "px"
}
//オーバーフローを防ぎます
limit（）;
}、30）;
document.onkeydown = function（event）
{
var event = event || window.event;
bctrlkey = event.ctrlkey;
switch（event.keycode）
{
ケース37：
bleft = true;
壊す;
ケース38：
if（bctrlkey）
{
var oldwidth = obox.offsetwidth;
var oldheight = obox.offsetheight;
obox.style.width = obox.offsetwidth * 1.5 + "px";
obox.style.height = obox.offsetheight * 1.5 + "px";
obox.style.left = obox.offsetleft-（obox.offsetwidth -oldwidth） / 2 + "px";
obox.style.top = obox.offsettop-（obox.offsetheight -Oldheight） / 2 + "PX";
壊す;
}
btop = true;
壊す;
ケース39：
Bright = true;
壊す;
ケース40：
if（bctrlkey）
{
var oldwidth = obox.offsetwidth;
var oldheight = obox.offsetheight;
obox.style.width = obox.offsetwidth * 0.75 + "px";
obox.style.height = obox.offsetheight * 0.75 + "px";
obox.style.left = obox.offsetleft-（obox.offsetwidth -oldwidth） / 2 + "px";
obox.style.top = obox.offsettop-（obox.offsetheight -Oldheight） / 2 + "PX";
壊す;
}
bbottom = true;
壊す;
ケース49：
bctrlkey &&（obox.style.background = "green"）;
壊す;
ケース50：
bctrlkey &&（obox.style.background = "yellow"）;
壊す;
ケース51：
bctrlkey &&（obox.style.background = "blue"）;
壊す;
}
falseを返します
};
document.onkeyup = function（event）
{
switch（（event || window.event）.keycode）
{
ケース37：
bleft = false;
壊す;
ケース38：
btop = false;
壊す;
ケース39：
bright = false;
壊す;
ケース40：
bbottom = false;
壊す;
}
};
//オーバーフローを防ぎます
function lime（）
{
var doc = [document.documentelement.clientwidth、document.documentelement.clientheight]
//左側がオーバーフローしないようにします
obox.offsetLeft <= 0 &&（obox.style.left = 0）;
//トップオーバーフローを防ぎます
obox.offsettop <= 0 &&（obox.style.top = 0）;
//右側がオーバーフローしないようにします
doc [0] -obox.offsetleft -obox.offsetwidth <= 0 &&（obox.style.left = doc [0] -obox.offsetwidth + "px"）;
//ボトムオーバーフローを防ぎます
doc [1] -obox.offsettop -obox.offsetheight <= 0 &&（obox.style.top = doc [1] -obox.offsetheight + "px"）
}
};
</script>
説明：
上：↑次：↓左：←右：→
Ctrl + 1：背景は緑になります
Ctrl + 2：背景は黄色になります
Ctrl + 3：背景は青に変わります
Ctrl +↑：ズームインします
Ctrl +↓：縮小
HTMLパーツ：
コードコピーは次のとおりです。ブロックが移動されています[div]
<div id = "box"> </div>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。