HTML：用键盘实现元素的方向移动

案例:div的方向移动

body部分：

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

style样式：自己设置大小灯样式，其中最重要的是要元素脱离文档流---不占页面位置了，其下也可以放其他元素。

 #ok {position: absolute;  }

补absolute：它的参照物是最近使用了定位的父级，如果没有找body。

此案例中div id="ok"的父级就是body。

首先：我们需要知道怎样将键盘中的按键与元素/对象相联系，能控制它。

这就是JS键盘事件（详细介绍在最后）。

Left arrow(左箭头键)	37	Top arrow(上箭头键)	38
Rigth arrow(右箭头键)	39	Down arrow(下箭头键)	40

其次：在页面中的位置，距离应该怎么控制。这就用到javascript中offsetLeft和offsetTop了。

例：offsetLeft：

此属性可以返回当前元素距离某个父辈元素左边缘的距离，当然这个父辈元素也是有讲究的。

（1）.如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。
（2）.如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。

语法结构:

obj.offsetleft:此属性是只读的，不能够赋值。

ps:js中的offsetLeft属性具体有什么作用？

可以判断一个物体的跟document的左边距离，也就是浏览器左边缘。当然你也可以用它给对象赋值，offset不单单只有Left 还有offsetTop ,offsetWidth, offsetHeight 都是JS里很有用的属性。

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';
    }

输出：

不能斜着走，操作不顺滑

修正后：

  //计时器加状态+状态（布尔值）更容易操作
    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)
   

222

               JS键盘事件介绍

在JavaScript中，当用户操作键盘时，会触发键盘事件，键盘事件主要包括下面3中类型:

• keydown: 在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是Opera浏览器不支持这种连续操作。该事件处理函数返回false时，会取消默认的动作(如输入的键盘字符，在IE和Safari浏览器下还会禁止keypress事件响应).
• keypress: 按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回false时，会取消默认的动作(如输入的键盘字符).
• keyup： 释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个连续的响应状态。

当获取用户正按下建码时，可以使用keydown、keypress和keyup事件获取这些信息。

键盘事件属性：

属性	说明
keyCode	该属性包含键盘中对应键位的键值
charCode	该属性包含键盘中对应键位的Unicode编码，仅DOM支持
target	发生事件的节点(包含元素),仅DOM支持
srcElement	发生事件的元素，仅IE支持
shiftKey	是否按下Shift键，如果按下返回true，否则为false
ctrlKey	是否按下Ctrl键，如果按下返回true，否则为false
altKey	是否按下Alt键，如果按下返回true，否则为false
metaKey	是否按下Meta键，如果按下返回true，否则为false，仅DOM支持

keyCode和charCode属性值

属性	IE事件模型	DOM事件模型
keyCode(keypress)	返回所有字符键的正确值，区分大写状态(65-90)和小写状态(97-122)	功能键返回正确值，而Shift、Ctrl、Alt、PrintScreen、ScrollLock无返回值，其他所有键值都返回0
keyCode(keydown)	返回所有键值(除PrintScreen键),字母键都以大写状态显示键值(65~90)	返回所有键值(除PrintScreen键),字母键都以大写状态显示键值(65~90)
keyCode(keyup)	返回所有键值(除PrintScreen键),字母键都以大写状态显示键值(65~90)	返回所有键值(除PrintScreen键),字母键都以大写状态显示键值(65~90)
charCode(keypress)	不支持该属性	返回字符键，区分大写状态(65~90)和小写状态(97~122),Shift、Ctrl、Alt、PrintScreen、ScrollLock无返回值，其他所有键值都返回0
charCode(keydown)	不支持该属性	所有键值为0
charCode(keyup)	不支持该属性	所有键值为0

键位和码值对照表

键位	码值	键位	码值
0~9(数字键)	48~57	A~Z(字母键)	65~90
Backspace(退格键)	8	Tab(制表键)	9
Enter(回车键)	13	Space(空格键)	32
Left arrow(左箭头键)	37	Top arrow(上箭头键)	38
Rigth arrow(右箭头键)	39	Down arrow(下箭头键)	40