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

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

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

左键被按下：在div现有的坐标值中，left的值减掉对应的值即可，值越大，移动的速度越快。
```
box.style.left = box.offsetLeft - speed +"px";
```
上键被按下：在div现有的坐标值中，top的值减掉对应的值即可，值越大，移动的速度越快。
```
box.style.top = box.offsetTop - speed +"px";
```
右键被按下：在div现有的坐标值中，left的值加上对应的值即可，值越大，移动的速度越快。
```
box.style.left = box.offsetLeft + speed +"px";
```
下键被按下：在div现有的坐标值中，left的值加上对应的值即可，值越大，移动的速度越快。
```
box.style.top = box.offsetTop + speed +"px";
```

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

整体的练习代码如下：

<!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>键盘移动div</title><style type="text/css">#box{width: 100px;height: 100px;position: absolute;background-color: red;}</style><script type="text/javascript">window.onload = function(){var box = document.getElementById("box");document.onkeydown = function(event){// alert("绑定成功");event = event || window.event;// alert(event.keyCode);//定义变量，表示div移动的速度var speed = 10;if(event.ctrlKey){speed += 50;}switch(event.keyCode){case 37 :box.style.left = box.offsetLeft - speed +"px";if(box.offsetLeft < 0){box.offsetLeft = 0 +"px";}break;case 38 :box.style.top = box.offsetTop - speed +"px";if(box.offsetTop < 0){box.offsetTop = 0;}break;case 39 :box.style.left = box.offsetLeft + speed +"px";break;case 40 :box.style.top = box.offsetTop + speed +"px";break; default : return 0;}};};</script>
</head>
<body><div id="box"></div>
</body>
</html>

如果以上的内容对你有帮助，动动小手点个赞吧！

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

js实现键盘控制div移动（可加速）_☆往事随風☆的博客
文章目录前言一.基本思路二.代码分析 1.首先为div开启绝对定位 2.为document绑定键盘按下和抬起事件 3.获取对应键盘的Unicode编码 4.设置变量保存速度和键盘Unicode编 ...
js通过键盘操控盒子
js通过键盘操控盒子步骤 1.键盘按下方向键,可以控制小盒子的移动. 1.1 给谁添加键盘按下事件 document 1.2 如何判断按下的是哪个键键盘事件对象 1.3 如何让小盒子移动让小盒子绝 ...
js检测键盘组合键，禁止F12
js检测键盘组合键ctrl+p js检测键盘组合键ctrl+d js检测键盘组合键ctrl+s js禁止F12 体验地址:点击在线体验 <!DOCTYPE html> <html l ...
java 图片运动_怎么在GUI中用键盘控制图片运动？java问题？
怎么在GUI中用键盘控制图片运动?java问题? 关注:174 答案:3 mip版解决时间 2021-01-17 01:03 提问者落叶.牵绊着思念 2021-01-16 09:43 怎么在GU ...
在js中用图片显示当前时间
在js中用图片显示当前时间 <!DOCTYPE html><html lang="en"><head><meta charset=&quo ...
Cygwin复制，粘贴直接用鼠标在黑框上选区即可，选区结束就已经复制了。cygwin里面Ctrl+V是不能粘贴的，用Shfit+ Insert（键盘上下左右方向键的上面） Cygwin 下切换目
Cygwin复制,粘贴直接用鼠标在黑框上选区即可,选区结束就已经复制了.cygwin里面Ctrl+V是不能粘贴的,用Shfit+ Insert(键盘上下左右方向键的上面) Cygwin 下切换目录略 ...
selenium java 滚动条_java+selenium使用JS、键盘滑动滚动条
本篇文章介绍如何使用JS和键盘对象对页面进行滑动滚动条-------------主要针对java做自动化测试的同学一:使用键盘对象操作滚动条 //导包 importorg.openqa.seleni ...
php解析api xml并输出到html页面,怎样操作JS读取xml内容并输出到div内
这次给大家带来怎样操作JS读取xml内容并输出到div内,操作JS读取xml内容并输出到div内的注意事项有哪些,下面就是实战案例,一起来看一下. note.xml文件结构: George John ...
php接收键盘事件,js获取键盘事件的方法实例
本文主要和大家分享js获取键盘事件的方法实例,希望能帮助到大家. document.οnkeydοwn=function(event){ var e = event || window.event | ...

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

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

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

最新文章

热门文章