第一种: 不太适用,div移动的不顺利
var dOk = document.getElementById("ok");//获取想要的元素
window.onkeydown=function(e){
var l=dOk.offsetLeft;
var t=dOk.offsetTop;
if(e.keyCode===37){
l-=5;
}else if(e.keyCode===38){
t-=5;
}else if(e.keyCode===39){
l+=5;
}else if(e.keyCode===40){
t+=5;
}
dOk.style.left=l+'px';
dOk.style.top=t+'px';
}
第二种:计时器+状态
var isLeft = false;
var isTop = false;
var isRight = false;
var isBottom = false;
var timer = null;
// 键盘事件值修改状态
window.onkeydown = function (e) {
if (e.keyCode === 37) {
isLeft = true;
} else if (e.keyCode === 38) {
isTop = true;
} else if (e.keyCode === 39) {
isRight = true;
} else if (e.keyCode === 40) {
isBottom = true;
}
}
window.onkeyup = function (e) {
if (e.keyCode === 37) {
isLeft = false;
} else if (e.keyCode === 38) {
isTop = false;
} else if (e.keyCode === 39) {
isRight = false;
} else if (e.keyCode === 40) {
isBottom = false;
}
}
// 通过计时器实现移动
timer = setInterval(function () {
var l = dOk.offsetLeft;
var t = dOk.offsetTop;
if (isLeft) { l -= 5; }
// 每个方向都要判断
if (isTop) { t -= 5; }
if (isRight) { l += 5; }
if (isBottom) { t += 5; }
dOk.style.left = l + 'px';
dOk.style.top = t + 'px';
}, 30)