键盘控制盒子移动案例

通过键盘上的上下左右按键控制一个盒子在页面上移动，并且解决持续按键盒子会有卡顿的问题

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>div随键盘控制移动</title><style>#box {width: 100px;height: 100px;background-color: aqua;position: absolute;}</style>
</head><body><div id="box"></div><script>var box = document.getElementById("box");var speed = 10;var dir = 0;//首先给给document绑定一个键盘事件document.onkeydown = function(event) {event = event || window.event;//解决IE兼容问题dir = event.keyCode;//测试一下键盘上下左右几个键的值//console.log(event.keyCode);}document.onkeyup = function() {dir = 0;}setInterval(() => {switch (dir) {case 37:box.style.left = box.offsetLeft - speed + "px";break;case 38:box.style.top = box.offsetTop - speed + "px";break;case 39:box.style.left = box.offsetLeft + speed + "px";break;case 40:box.style.top = box.offsetTop + speed + "px";//console.log(box.style.top);break;}}, 30);//利用定时调用方法，解决卡顿问题</script>
</body></html>

键盘控制盒子移动案例相关推荐

html点击控制盒子左右移动,JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例...
本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动.分享给大家供大家参考,具体如下: 1. 盒子跟着鼠标移动 content="width=device-width, user- ...
Java基础重温_02：运算符、三元运算符案例（2只老虎、3个和尚）、键盘录入（Scanner类）、控制流程语句、控制流程语句案例（奇偶数、考试奖励）
摘要 Java基础重温_02: 运算符(算术运算.+操作.赋值运算.自增自减.关系运算(比较).逻辑运算.短路逻辑运算.三元运算) 三元运算符案例(2只老虎:2个变量比较.三个和尚:3个变量比较) 键 ...
ROS通信机制--键盘控制乌龟运动线速度角速度XYZ值的解释
目录前言案例实现线速度角速度X.Y.Z值的取值和作用 (END) 前言在学习ros之初,想必大家运行的第一个案例就是键盘控制乌龟运动.这是ros内置的小案例,采用的通信机制为话题通信.本文介绍 ...
UE4(unreal Engine)中使用蓝图类Actor创建开关门，并使用鼠标和键盘控制开关门
UE4系列文章目录文章目录 UE4系列文章目录前言一.具体步骤 (一)自动开关门 (二)使用键盘开关门 (三)使用鼠标开关门总结前言上一节中我们讨论了用蓝图来控制开关门,虽然可以实现效果, ...
ROS小乌龟走设定图形路线（键盘控制+Python代码实现）
相信在很多人学习ROS的时候都会写一下这个demo,不仅是对代码能力的考察(代码语法.结构都还是相对简单的),还是对ROS话题通信这些基础概念的理解的考量. 首先命令运行 roscore rosrun ...
js通过键盘操控盒子
js通过键盘操控盒子步骤 1.键盘按下方向键,可以控制小盒子的移动. 1.1 给谁添加键盘按下事件 document 1.2 如何判断按下的是哪个键键盘事件对象 1.3 如何让小盒子移动让小盒子绝 ...
小学计算机课教案认识键盘,小学信息技术《认识键盘》优秀教学案例.docx
小学信息技术<认识键盘>优秀教学案例小学信息技术<认识键盘>优秀教学案例 <认识键盘>教学案例江苏省运河师范学校附属小学惠祥宁教学内容苏教版信息技术教材小 ...
html5 javascript 事件练习3键盘控制练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
关于nginx信号控制的“故障”案例
关于nginx信号控制的"故障"案例最近几天发现nginx的日志老切割不成功,遂来查找问题. 最开始以为是logrotate的脚本问题,遂手动切割,运行以下的命令 logrota ...

键盘控制盒子移动案例

键盘控制盒子移动案例相关推荐

最新文章

热门文章