键盘事件练习 ——控制div移动

最新推荐文章于 2022-04-08 15:12:38 发布
最新推荐文章于 2022-04-08 15:12:38 发布
阅读量145 收藏
点赞数
分类专栏： Javascript 文章标签： js javascript css switch html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44154094/article/details/113055319
版权

控制div移动


topic:小键盘方向键控制div移动

思考一下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box {
				width: 100px;
				height: 100px;
				background-color: #8A2BE2;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="box">

		</div>
		<script type="text/javascript">
			
			document.onkeydown = function(event) {
				event = event || window.event;
				// 37  39
				//var box = document.getElementById("box");
				var speed = 10;
				if(event.ctrlKey){
					speed = 30;
				}
				switch (event.keyCode) {
					case 37:
						
						box.style.left = box.offsetLeft - speed + "px";
						break;
					case 39:
						box.style.left = box.offsetLeft + speed + "px";
						break;
					case 38:
						box.style.top = box.offsetTop-speed+"px";
						break;
					case 40:
						box.style.top = box.offsetTop+speed+"px";
						break;
				}
			};
		</script>
	</body>
</html>
小生听雨园
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript——控制div的移动
Chenbaby_的博客
11-26 621
Title 上 下 左 右         var div = document.getElementById("div");     var btn = document.getElementsByTagName("button");     btn[0].onclick = function () {         div.style.top = pa
文本框控制div元素移动
weixin_57762564的博客
04-28 118
1：创建一个html文件 2：选择语言 3：输入创建框架 4.写两个 input文本框用来控制div元素的上下左右方向并设置id 5.写一个div与button按钮并设置id 6.设置div的样式（注意，方向只能设置在内联样式中，不然用js属性设置时会无效） 7.在底部写一个script用来写js 8.获取input标签与div以及按钮 9.写一个fun...
键盘事件控制元素移动
huhuhuja
10-12 253
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>17键盘控制方块运.
通过键盘事件实现div移动
weixin_43706763的博客
08-09 120
通过键盘事件实现div移动 <style> .box { width: 200px; height: 200px; background-color: skyblue; position: absolute; top: 200px; left: 200px; } </style> </he
利用键盘控制小方块的移动
01-08
原理 1. 利用键盘控制移动，则需要了解onkeydown函数，表示某个按键被按下，可以以此绑定一个事件响应函数，当键盘被按下时候，触发此事件，进行移动 2. keyCode 对于keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 因此我们可以根据keycode返回的字符码来判断用户所按下的键，下面就是一个用于测试上下左右按键的js代码，经过我的测试之后，返回37 38 39 40； [removed] = function(){
键盘控制div移动
mantou_riji的博客
04-08 657
实现滑块的控制移动 按住上下左右使滑块向对应的方向移动。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> #box1{ height: 100px; width: 100px; background-color:red; posi
js实现键盘控制DIV移动的方法
10-24
主要介绍了js实现键盘控制DIV移动的方法,以实例形式完整的讲述了js控制div移动所涉及的css、js与html使用技巧,需要的朋友可以参考下
js实现上下左右键盘控制div移动
10-15
标签“js上下键盘控制div移动”、“js键盘控制div移动”、“js上下左右键盘控制”进一步强调了这个话题的核心，即利用JavaScript处理键盘事件，并据此改变div的CSS属性（如`top`和`left`）来实现移动效果。...
JavaScript利用键盘码控制div移动
10-15
主要为大家详细介绍了JavaScript利用键盘码控制div移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Js事件案例——上下左右键盘控制div移动
进击的葱
12-25 4296
描述： div通过键盘事件上下左右实现div块的移动 效果：     实现： js： var Method=(function () { return { EVENT_ID:"event_id", loadImage:function (arr) { var img=new Image(); ...
JavaScript键盘上下键控制移动
a_sid的博客
12-02 6620
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #did { width: 400px; height: 400px; b
JS基础_键盘移动div
兴趣是最好的老师
12-12 214
<!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实现键盘控制div移动（可加速）_☆往事随風☆的博客
☆往事随風☆的博客
07-26 1923
文章目录前言一、基本思路二、代码分析1.首先为div开启绝对定位2.为document绑定键盘按下和抬起事件3.获取对应键盘的Unicode编码4.设置变量保存速度和键盘Unicode编码5.通过定时器设置移动速度和方向三、整体代码四、效果展示五、总结 前言 利用js实现键盘控制div移动，同时按下ctrl和方向键可以实现加速移动。 一、基本思路 通过js中的键盘事件来对div的移动做出响应，这里以上下左右键为例，首先获取到这四个按键的Unicode编码，然后在定时器中设置对应的移动方向和速度。 二、.
java用键盘控制对象移动_java关于键盘控制物体移动的问题
weixin_35664144的博客
02-23 1068
如果key监听器监听到方向键按下后，对此事件的处理是先判断方向direction()，然后移动坐标一下move()，处理完后程序把物体画出来。按这思路，会发现如果物体原先是静止的，然后一...如果key监听器监听到方向键按下后，对此事件的处理是先判断方向direction()，然后移动坐标一下move()，处理完后程序把物体画出来。按这思路，会发现如果物体原先是静止的，然后一直按着某一方向键，物体...
js键盘事件--实现div移动
qq_44604924的博客
08-22 855
用键盘事件实现div移动 键盘事件：onkeydown 按键按下，连续按下时，第一次和第二次会停顿一下，防止误操作 onkeyup 按键松开 这两个事件一般会绑定给可以获取焦点的一些元素或者document元素 可通过keyCode来获取按键的编码 除此之外还有altkey,shiftkey,ctrlkey keyCode 37左 38上 39 右 40下 js代码如下： <script type="text/javascript"> /* 键盘事件：onkeydown 按键按下
键盘方向键控制div移动
qq_32864189的博客
05-12 475
直接上代码，尚硅谷牛逼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background: #FF0000; position: absolute; }
java键盘控制左右移动代码_js实现键盘控制DIV移动的方法
weixin_39937635的博客
03-02 145
window.onload = function (){var oBox = document.getElementById("box");var bLeft = bTop = bRight = bBottom = bCtrlKey = false;setInterval(function (){if (bLeft){oBox.style.left = oBox.offsetLeft - 10 +...
JS实现键盘控制div全方位移动
huangqiang80的博客
01-13 852
JS实现键盘控制div全方位移动 创建onkeydown的全局响应事件，给div设置加速度，并控制div开始移动。 创建定时器控制div持续移动，这样可以防止div移动的卡顿现象。 创建onkeyup的全局响应事件，控制div停止移动。 div移动的卡顿现象是由于在按下键盘时，系统需要区分用户是否是持续输入，这个过程就会出现短暂的卡顿，用定时器可以巧妙的避免。 完整代码： <style lang="css"> #box1{ width: 100px;
js键盘控制div移动
最新发布
05-11
你可以使用JavaScript监听键盘事件，通过修改div的css来实现移动。以下是一个简单的实现示例： HTML代码： ```html <div id="box"></div> ``` CSS代码： ```css #box { width: 100px; height: 100px; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值