按键盘的上下左右按钮-->div移动
<body><div id="ok"></div></body><script>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';}</script>
这样写按上下左右键div盒子运动不自然，而且只能直上直下不能斜着走。
<script>//合适的打开方式：计时器＋状态//计时器var timer = null;//状态var isLeft = false;var isTop = false;var isRight = false;var isBottom = false;//键盘事件只修改状态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)</script>
运用计时器和状态结合，这样盒子即可以直上直下也可斜着运动了
