JavaScript实现方向键操控元素位移

最新推荐文章于 2022-09-26 16:44:21 发布
最新推荐文章于 2022-09-26 16:44:21 发布
阅读量1.4k 收藏 6
点赞数 16
文章标签： javascript js html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44237608/article/details/115209361
版权
这篇博客介绍了如何使用JavaScript实现网页中元素通过方向键进行位置控制。作者在学习事件监听时，编写了一个小示例，并提供了可直接用于HTML文件的代码。通过这个实践，作者强调将新学到的知识转化为可见的成果能带来成就感。
摘要由CSDN通过智能技术生成

JavaScript实现网页上用方向键元素位置控制

学习JavaScript的事件监听部分时，自己试着编写了一个小玩意出来。
把这些代码直接复制进html文件中就能使用了。
在注释中每一部分内容都自认为写的比较清楚，有哪部分没看懂的可以在评论区进行交流，大家一起共勉。

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方向键操控target位移 by见咲</title>
    <style>
        *{
   
            padding:
最低0.47元/天 解锁文章
见咲
关注
  • 16
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
JS中用键盘的方向键来移动div（switch...case）
Fantasc的博客
08-14 877
使div随着键盘上下左右键的触发而移动， 思路：获取div，为document绑定键盘按下事件，在事件中使用switch…case来判断键盘按下的是哪一个键，对应的keyCode对应着不同的方向键： 左键被按下：在div现有的坐标值中，left的值减掉对应的值即可，值越大，移动的速度越快。 box.style.left = box.offsetLeft - speed +"px"; 上键被按下：在div现有的坐标值中，top的值减掉对应的值即可，值越大，移动的速度越快。 box.style.top
js通过方向键移动盒子（按shift移动距离加倍）
yang68668的博客
11-08 313
<style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background-color: #16a085; position: absolute; left: 0; .
JS实现方向键切换输入框
peter_qyq的博客
05-28 1406
代码如下var array = []; $(document).ready(function(){ array[0] = [document.getElementById("a"),document.getElementById("b"),document.getElementById("c")]; array[1] = [document.getElementById("d"),docume...
js函数-动画效果之元素位移函数
Antg的博客
04-10 414
一、代码如下 function moveMessage(elementID,final_x,final_y,interval){ if(!document.getElementById) return false; if(!document.getElementById(elementID)) return false; var elem = document.getElementById(...
JS键盘方向控制
iteye_14791的博客
12-19 247
&lt;script&gt; //document.onkeydown=keydown //document.onkeyup=keyup var $=function(objId) { return document.getElementById(objId); } Array.prototype.remove=function(keypos) { var...
JavaScript实现按Ctrl键打开新页面
10-25
主要介绍了JavaScript实现按Ctrl键打开新页面的例子,本文方法适用HTML5环境中,需要的朋友可以参考下
javascript实现的使用方向键控制光标在table单元格中切换
10-28
最近公司开发ERP项目，要求商品入库选择货架号时支持使用方向键快速选择，以提高入库效率。
javascript实现回车键提交表单方法总结
10-24
主要介绍了javascript实现回车键提交表单方法,实例总结了纯javascript与jQuery的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript取得键盘按下方向键是哪个的方法
10-23
主要介绍了JavaScript取得键盘按下方向键是哪个的方法,涉及javascript针对键盘按键事件的判定技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JS实现方向键切换输入框焦点的方法
10-23
主要介绍了JS实现方向键切换输入框焦点的方法,涉及javascript鼠标事件及页面元素焦点的切换实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js键盘方向键实现盒子移动
日常分享
07-09 3802
&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;style type="text/css"&gt; div{ width:100px; height:100px; background: red; ...
javascript方向键使用
php|nginx|python|vue|redis|linux
06-24 900
 javascript方向键使用 tr.highlight{ background:#08246B; color:white; }                                                          北京                                  
JS中键盘方向键移动div（使用setInteral定时器优化后，按键按下div不会停滞，移动顺畅）
Fantasc的博客
08-15 288
分析：如果让方向键同时控制方向和速度，那么无法有好的使用效果，所以要将方向和速度分开控制。 使用定时器来控制方向，获取到对应的方向键的keyCode值就向不同的方向移动。 在按键松开的时候将方向清空，确保在按键松开时div不会在继续移动。 练习代码如下，对比分析，理清思路： 这是之前没有优化的代码，按键按下之后，div会停滞一会才开始移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
js获取键盘方向键（上下左右），执行相应的方法
徊忆羽菲
09-26 2247
js获取键盘方向键（上下左右），执行相应的方法
JS实战之使用键盘方向键控制方块的上下左右移动
weixin_44278828的博客
10-13 2403
使用键盘方向键控制方块的上下左右运动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>控制方块的上下左右移动</title> <style type="text/css"> #box1{ width: 100px; height: 100px;
JavaScript中DOM键盘事件，使用键盘方向键控制图形的移动
Etui۹(･༥･´)و的博客
04-10 1059
注： 键盘事件 onkeydown 按键按下 如果按住按键不松，则该事件会连续触发 当onkeydown连续触发时，第一次和第二次之间会间隔时间稍长，其他的会非常快 这种设计是为了防止一些误操作 onkeyup 按键被松开
js之方向检测
qq_41662119的博客
08-14 210
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;方向检测&lt;/title&gt; &lt;style type="text/css&quo
键盘方向键移动元素
wuxiao18的博客
07-28 302
box1根据键盘上下左右按键移动，要记得给box1开启定位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title></title> <style type="text/css"> #box1{ height:...
JS-键盘事件之方向键移动元素
xing.org1^
05-02 113
注意三点：1：事件名称onkeydown。2：事件加给document，而非window。3： 把元素的top，left值分别用offsetTop，offsetLeft来设定。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title...
前端实现上下左右方向键控制
最新发布
06-06
在前端实现上下左右方向键控制，可以通过监听`keydown`事件来实现。具体步骤如下： 1. 给需要控制的元素添加`tabindex`属性，让其可以获取焦点。 2. 给该元素绑定`keydown`事件，监听方向键的按下。 3. 在`keydown`事件处理函数中，根据按下的方向键修改元素的位置或状态。 4. 需要注意的是，在处理方向键时，要阻止浏览器默认的滚动行为。 以下是一个简单的示例代码，实现了通过方向键控制一个小方块的上下左右移动： ```html <div id="box" tabindex="0"></div> ``` ```css #box { width: 50px; height: 50px; background-color: red; position: absolute; top: 0; left: 0; } ``` ```javascript const box = document.getElementById('box'); const step = 10; box.addEventListener('keydown', e => { switch (e.keyCode) { case 37: // 左箭头 e.preventDefault(); // 阻止默认行为 box.style.left = `${parseInt(box.style.left) - step}px`; // 修改位置 break; case 38: // 上箭头 e.preventDefault(); box.style.top = `${parseInt(box.style.top) - step}px`; break; case 39: // 右箭头 e.preventDefault(); box.style.left = `${parseInt(box.style.left) + step}px`; break; case 40: // 下箭头 e.preventDefault(); box.style.top = `${parseInt(box.style.top) + step}px`; break; } }); ``` 在这个示例中，我们首先给小方块添加了`tabindex`属性，让其可以获取焦点。然后，在`keydown`事件处理函数中，我们根据按下的方向键修改小方块的位置，同时阻止了浏览器的默认滚动行为。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值