JavaScript中DOM键盘事件，使用键盘方向键控制图形的移动

注：

                键盘事件onkeydown   按键按下如果按住按键不松，则该事件会连续触发当onkeydown连续触发时，第一次和第二次之间会间隔时间稍长，其他的会非常快这种设计是为了防止一些误操作onkeyup     按键被松开可以通过keyCode来获取按键的编码通过它可以判断哪个按键被按下除了keyCode，时间对象中还提供了以下几个属性altKeyctrlKeyshiftKey这三个属性用来判断alt ctrl shift 是否被按下如果按下则返回true，否则返回false

本案例效果图如下：

源码及解析如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>方向键控制方块的移动</title><style>#box1{width: 100px;height: 100px;background-color: tomato;position: absolute;}</style><script>window.onload = function(){var box1 = document.getElementById("box1");document.onkeydown = function(event){//使各种浏览器兼容eventevent = event || window.event;//定义一个变量表示图形移动的速度var divMove = 10;//当按下Ctrl时，移动加速if(event.ctrlKey){console.log("Ctrl已按下");divMove = 50;}console.log("keyCode = "+event.keyCode);switch(event.keyCode){case 37:box1.style.left = box1.offsetLeft - divMove + "px";break;case 38:box1.style.top = box1.offsetTop - divMove + "px";break;case 39:box1.style.left = box1.offsetLeft + divMove + "px";break;case 40:box1.style.top = box1.offsetTop + divMove + "px";break;}};};</script></head><body><div id="box1"></div></body>
</html>

JavaScript中DOM键盘事件，使用键盘方向键控制图形的移动相关推荐

JS--JavaScript使用键盘事件、键盘事件属性（keyCode、charCode、target...）、使用键盘控制页面元素
键盘事件当用户操作键盘时会触发键盘事件,键盘事件主要包括下面3种类型: keydown: 在键盘上按下某个键时触发.如果按住某个键,会不断触发该事件,但是Opera浏览器不支持这种连续操作.该事件处 ...
前端技术学习第四讲：JavaScript中DOM和BOM
JavaScript中DOM和BOM 一.DOM和BOM DOM:文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与 ...
html内置时间对象,JavaScript中的常用事件，以及内置对象详解
原标题:JavaScript中的常用事件,以及内置对象详解今天是刘小爱自学Java的第81天. 感谢你的观看,谢谢你. 话不多说,开始今天的学习: 学前端有一个非常权威的组织,也就是w3c,其有个专 ...
javascript中的常见事件
javascript中的常见事件 (a) 窗口事件,只在body和frameset元素中才有效 1.onload,页面或者图片加载完成时 2.onunload,用户离开页面时候 (b) 表单元素事件, ...
JavaScript中DOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
JavaScript中DOM对象的详解
*** JavaScript中DOM对象的详解*** DOM对象:Document Object Model,文档对象模型.也称为document(文档对象),是HTML页面当前窗体的内容,是连接JS ...
day29—JavaScript中DOM的基础知识应用
转行学开发,代码100天--2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...
C语言 ACLLib键盘方向键控制图形移动以及鼠标控制图形移动
C语言 ACLLib键盘方向键控制图形移动以及鼠标控制图形移动鼠标的参数键盘的参数键盘方向键控制图形移动鼠标控制图形移动鼠标的参数 button:5:没有按下鼠标1:按下左键2:按下中键3: ...
javascript中的onpropertychange事件与 jquery中的propertychange事件
2019独角兽企业重金招聘Python工程师标准>>> jquery 中的propertychange事件不兼容IE9 而javascript中的onpropertychange事 ...

JavaScript中DOM键盘事件，使用键盘方向键控制图形的移动

JavaScript中DOM键盘事件，使用键盘方向键控制图形的移动相关推荐

最新文章

热门文章