效果：上下左右控制其方向运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 50px;
height: 50px;
background: #00A7F6;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script>
//创建各个方向条件判断变量是为了使其不再移动是卡顿
var
oDiv=
document.
getElementsByTagName(
"div")[
0];
//
创建各个方向条件判断初始变量
var
t =
false;
var
l =
false;
var
r =
false;
var
b =
false;
document.onkeydown=
function (ev) {
var
even =
window.event||ev;
var
key =
even.keyCode;
//
当按下对应方向键时，对应变量为
true
switch (
key){
case
37:
l=
true;
break;
case
38:
t=
true;
break;
case
39:
r=
true;
break;
case
40:
b=
true;
break; } }
//
设置一个定时，时间为
10
左右
setInterval(
fn,
10);
function
fn() {
//
当其中一个条件为
true
时，则执行当前函数（移动对应方向）
if(
l){
oDiv.
style.
left =
oDiv.offsetLeft-
2+
"px"; }
else if(
t){
oDiv.
style.
top =
oDiv.offsetTop-
2+
"px"; }
else if(
r){
oDiv.
style.
left =
oDiv.offsetLeft+
2+
"px"; }
else if(
b){
oDiv.
style.
top =
oDiv.offsetTop+
2+
"px"; } }
//
执行完后，所有对应变量恢复为
false
，保持静止不动
document.onkeyup=
function (ev) {
var
even =
window.event || ev;
var
key =
even.keyCode;
switch (
key){
case
37:
l=
false;
break;
case
38:
t=
false;
break;
case
39:
r=
false;
break;
case
40:
b=
false;
break; } }
</
script
>
</
body
>
</
html
>