【键盘事件】简单实现键盘控制元素移动

1.简单布局

设置一个div,作为控制的对象

<div id="ok"></div>

简单给一下样式

<style>
	*{
		padding: 0;
		margin: 0;
	}
	#ok{
		width: 100px;
		height: 100px;
		background-color: hotpink;
		position: absolute;
		left: 200px;
		top: 200px;
	}
</style>

JS部分

//获取元素
var dOk = document.getElementById("ok");

加入下边这段代码，就会发现，元素的运动很不自然，第一下动之后会停止一下然后再继续移动，而且不能斜着走

window.onkeydown = function(e){
		var l = dOk.offsetLeft;

 - List item

		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;
		}
		else{
			return ;
		}
		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;
	}
	l = l < 0 ? 0 : (l > window.innerWidth -					 dOk.offsetWidth ? window.innerWidth - dOk.offsetWidth : l);
	t = t < 0 ? 0 : (t > window.innerHeight - dOk.offsetHeight ? window.innerHeight - dOk.offsetHeight : t);
	dOk.style.left = l + 'px';
	dOk.style.top = t + 'px';
},30)