JS中用键盘的方向键来移动div（switch...case）

最新推荐文章于 2022-09-26 16:44:21 发布
最新推荐文章于 2022-09-26 16:44:21 发布
阅读量881 收藏 3
点赞数 2
分类专栏： JS基础学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fantasc/article/details/119696690
版权
本文介绍了如何利用JavaScript监听键盘事件，结合switch...case语句，实现div元素随着上下左右方向键移动。重点在于理解键盘事件的keyCode和div坐标值的处理，通过修改div的offsetLeft和offsetTop属性，结合速度参数实现不同方向的平移效果。
摘要由CSDN通过智能技术生成

使div随着键盘上下左右键的触发而移动，

思路：获取div，为document绑定键盘按下事件，在事件中使用switch…case来判断键盘按下的是哪一个键，对应的keyCode对应着不同的方向键：

  1. 左键被按下：在div现有的坐标值中，left的值减掉对应的值即可，值越大，移动的速度越快。

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

  2. 上键被按下：在div现有的坐标值中，top的值减掉对应的值即可，值越大，移动的速度越快。

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

  3. 右键被按下：在div现有的坐标值中，left的值加上对应的值即可，值越大，移动的速度越快。

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

  4. 下键被按下：在div现有的坐标值中，left的值加上对应的值即可，值越大，移动的速度越快。

    box.style.top = box.offsetTop + speed +"px";
注意：在修改div的值时，需要在末尾为其拼上“px”，因为div的坐标是靠带px的像素点决定的，而offsetLeft或者offsetTop获取到的是一个Number类型值。

整体的练习代码如下：

<
最低0.47元/天 解锁文章
Fantasc
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中键盘方向键移动div（使用setInteral定时器优化后，按键按下div不会停滞，移动顺畅）
Fantasc的博客
08-15 291
分析：如果让方向键同时控制方向和速度，那么无法有好的使用效果，所以要将方向和速度分开控制。 使用定时器来控制方向，获取到对应的方向键的keyCode值就向不同的方向移动。 在按键松开的时候将方向清空，确保在按键松开时div不会在继续移动。 练习代码如下，对比分析，理清思路： 这是之前没有优化的代码，按键按下之后，div会停滞一会才开始移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
JavaScript实现方向键操控元素位移
weixin_44237608的博客
03-25 1472
JavaScript实现网页上用方向键元素位置控制 学习JavaScript的事件监听部分时，自己试着编写了一个小玩意出来。 把这些代码直接复制进html文件中就能使用了。 在注释中每一部分内容都自认为写的比较清楚，有哪部分没看懂的可以在评论区进行交流，大家一起共勉。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA
JS基础_键盘移动div
兴趣是最好的老师
12-12 216
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } .
js通过方向键移动盒子（按shift移动距离加倍）
yang68668的博客
11-08 316
<style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background-color: #16a085; position: absolute; left: 0; .
键盘控制div移动
weixin_33809981的博客
02-10 81
键盘控制div移动创建一个Move类（其实javascript没有类）function Move(){this.init.apply(this,arguments);}主要步骤如下：一、初始化创建一个div元素为div设置style属性值指定默认宽度，高度，距顶，距左，父容器，设置步长二、键盘上下左右键控制移动主要是修改div距顶，距左的距离三、父容器限制将创建的元素添加到父元素中，并...
filemanage功能中用到的lib.js
10-30
### 文件管理功能中的 lib.js 关键知识点解析 在软件开发过程中，尤其是涉及到文件管理功能时，`lib.js`这类库文件扮演着至关重要的角色。它通常包含了一系列与文件操作相关的函数，比如上传、预览、删除等。接下来...
nodejs中用npm初始化来创建package.json的实例讲解
10-17
在Node.js开发环境中，`package.json`文件是一个非常重要的组件，它存储了关于你的项目的信息，包括项目的元数据、依赖关系、脚本等。本文将详细介绍如何使用npm（Node Package Manager）初始化来创建`package.json`...
Node.js中用D3.js的方法示例
10-20
在命令行中，你可以使用npm（Node包管理器）来安装D3.js和jsdom，因为D3.js通常是为浏览器环境设计的，而Node.js本身不支持DOM操作，所以需要jsdom这个库来模拟DOM环境。安装命令如下： ```bash npm install d3 js...
vue中用 video.js 实现单个页面内多视频播放.zip
02-19
vue中用 video.js 实现单个页面内多视频播放 1、index_v01.vue 实现单页面内多视频播放，如效果图； 2、index_v02.vue 实现单页面内多视频播放，可视区域内的视频播放，不在可视区域内的暂停。 以防止在视频量大的...
基于node.js实现最长公共子序列算法.zip
最新发布
05-10
项目中的源代码很可能会包含一个名为"基于node.js实现最长公共子序列算法"的文件，其中展示了如何在Node.js环境中用JavaScript编写这个算法的详细过程。代码可能包括定义函数、创建dp数组、遍历和计算的过程，以及...
js实现上下左右键盘控制div移动
11-21
本文实例为大家分享了js上下左右键盘控制div移动的具体代码，供大家参考，具体内容如下 描述： div通过键盘事件上下左右实现div块的移动 效果：  实现： js： var Method=(function () { return { EVENT_ID:"event_id", loadImage:function (arr) { var img=new Image(); img.arr=arr; img.list=[]; img.num=0; // 如果DOM对象下的事件侦听没有被删除掉，将会常驻堆中 //
javascript利用键盘控制小方块的移动
11-20
本文实例为大家分享了利用键盘控制小方块的移动，供大家参考，具体内容如下 原理 1. 利用键盘控制移动，则需要了解onkeydown函数，表示某个按键被按下，可以以此绑定一个事件响应函数，当键盘被按下时候，触发此事件，进行移动 2. keyCode 对于keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 因此我们可以根据keycode返回的字符码来判断用户所按下的键，下面就是一个用于测试上下左右按键的js代码，经过我的测试之后，返回37 38 39 40；
javascript方向键使用
php|nginx|python|vue|redis|linux
06-24 905
 javascript方向键使用 tr.highlight{ background:#08246B; color:white; }                                                          北京                                  
js获取键盘方向键（上下左右），执行相应的方法
徊忆羽菲
09-26 2294
js获取键盘方向键（上下左右），执行相应的方法
JS实战之使用键盘方向键控制方块的上下左右移动
weixin_44278828的博客
10-13 2415
使用键盘方向键控制方块的上下左右运动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>控制方块的上下左右移动</title> <style type="text/css"> #box1{ width: 100px; height: 100px;
javascript学习之利用方向键控制div模块的移动
Ibelievesunshine的博客
06-15 1086
通过了测试
Javascript 键盘事件移动图片
weixin_34220834的博客
04-29 142
  CODE: &lt;body onkeydown="movePic()"&gt; &lt;div style="width:600px;height:300px;border:1px solid green"&gt; &lt;img id="pic" src="lang.gif" style=&qu
Vue.js实战：从入门到精通（完整版）
Vue.js是当前流行的JavaScript MVVM框架之一，其设计思想强调数据驱动和组件化，使得开发人员能够更专注于数据逻辑，而不是DOM操作。在本书中，作者首先介绍了如何从传统的开发模式过渡到使用Vue.js，包括数据渲染和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值