位置:首页 > 软件操作教程 > 编程开发 > JavaScript > 问题详情

JavaScript 使用方向键移动对象

提问人:刘团圆发布时间:2020-11-27

■知识点

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

旧事件模型

DOM事件模型

keyCode

(keypress)

返回所有字符键的正确值,区分大写状态 (65-90)和小写状态(97~122)

功能键返回正确值,而ShiftCtrlAltPrintScreenScrollLock无返回值,其他所有键值都返回0

keyCode

(keydown)

返回所有键值(除PrintScreen键),字母键都 以大写状态显示键值(65~90)

返回所有键值(除PrintScreen键),字母键都以大 写状态显示键值(65~90)

keyCode

(keyup)

返回所有键值(除PrintScreen键),字母键都 以大写状态显示键值(65~90)

返回所有键值(除PrintScreen键),字母键都以大 写状态显示键值(6590)

charCode

(keypress)

不支持该属性

返回字符键,区分大写状态(65~90)和小写状态 (97122),ShiftCtrlAltPrintScreen> ScrollLock

键无返回值,其他所有键值为0

charCode

(keydown)

不支持该属性

所有键值为0

charCode

(keyup)

不支持该属性

所有键值为0

常用功能键和字符键说明如表所示。

键 位

键 位

09 (数字键)

48-57

A-Z (字母键)

6590

Backspace (退格键)

8

Tab (制表键)

9

Enter (回车键)

13

Space (空格键)

32

Left arrow (左箭头键)

37

Top arrow (上箭头键)

38

Right arrow (右箭头键)

39

Down arrow (下箭头键)

40

■实例设计

本例设计如何使用方向键控制对象的移动效果。首先获取页面元素,通过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>


继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部