JavaScript 使用方向键移动对象

■知识点

keyCode和charCode属性在实际开发中比较常用，在不同事件类型和不同浏览器中的表现如表所示。

■实例设计

本例设计如何使用方向键控制对象的移动效果。首先获取页面元素，通过CSS脚本控制元素的绝对定位、大小和背景色，然后在document对象上注册鼠标按下事件类型处理函数，在事件回调函数keyDown()中侦测当前按下的方向键，并决定定位元素在窗口中的位置。其中，元素offsetLeft和 offsetTop属性可以存取它在页面中的位置。

<div id="box"></div>

<script>

var box = document.getEiementByid("box");

box.style.position = "iabsolute";

box.style.width = "20px";

box.style.height = "20px"; '

box.style.backgroundColor = "red";

document.onkeydown = keyDown;                //注册keyDown事件处理函数

function keyDown (event){                    //方向键控制元素移动函数

    var event = event |丨 window.event;      //标准化事件对象

    switch(event.keyCode){                   //获取当前按下键盘键的编码

    case 37 :                                //按下左箭头键，向左移动5个像素

        box.style.left = box.offsetLeft - 5 + "px";

        break;

    case 39 :                                //按下右箭头键，向右移动5个像素

        box.style.left = box.offsetLeft + 5 + "px";

        break;

    case 38 :                                //按下上箭头键，向上移动5个像素

        box.style.top = box.offsetTop - 5 + "px";

        break; 

    case 40 :                                //按下下箭头键，向下移动5个像素

        box.style.top = box.offsetTop + 5 + "px";

        break;

    }

    return false

}

</script>