js实现键盘控制div的移动，且解决停顿问题

最新推荐文章于 2022-10-09 22:11:18 发布
最新推荐文章于 2022-10-09 22:11:18 发布
阅读量867 收藏 8
点赞数 3
分类专栏： JavaScript 前端 文章标签： js 解决通过键盘控制div移动暂停问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lw_1220/article/details/90670565
版权

解决原生js通过键盘控制div移动，解决停顿问题

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1 {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 100px;
				top: 100px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//			↑:38
			//			→:39
			//			↓:40
			//			←:37
			//创建各个方向条件判断初始变量
			var oDiv = document.getElementById('div1');
			var left = false;
			var right = false;
			var top = false;
			var bottom = false;

			//当按下对应方向键时，对应变量为true
			document.onkeydown = function(ev) {
				var oEvent = ev || event;
//				var oDiv = document.getElementById('div1');
				//				alert(oEvent.keyCode);
				var keyCode = oEvent.keyCode;
				switch(keyCode) {
					case 37:
						left=true;
						break;
					case 38:
						top=true;
						break;
					case 39:
						right=true;
						break;
					case 40:
						bottom=true;
						break;
				}
			}
				//设置一个定时，时间为50左右，不要太高也不要太低
				setInterval(function() {
					//当其中一个条件为true时，则执行当前函数（移动对应方向）
					if(left) {
						oDiv.style.left = oDiv.offsetLeft - 10 + "px";
					} else if(top) {
						oDiv.style.top = oDiv.offsetTop - 10 + "px";
					} else if(right) {
						oDiv.style.left = oDiv.offsetLeft + 10 + "px";
					} else if(bottom) {
						oDiv.style.top = oDiv.offsetTop + 10 + "px";
					}
				}, 50);

				//执行完后，所有对应变量恢复为false，保持静止不动
				document.onkeyup = function(ev) {
					var oEvent = ev || event;
					var keyCode = oEvent.keyCode;

					switch(keyCode) {
						case 37:
							left = false;
							break;
						case 38:
							top = false;
							break;
						case 39:
							right = false;
							break;
						case 40:
							bottom = false;
							break;
					}
				}
			}
		</script>
	</head>

	<body>
		<div id="div1">

		</div>
	</body>

</html>

 

峰峰崛起的我
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
浅谈如何使用Js实现键盘控制div的移动
算法与编程之美
11-27 819
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。1 问题描述最近有接触到这样一个练习，怎么用JavaSc...
js实现上下左右键盘控制div移动
10-15
主要为大家详细介绍了js实现上下左右键盘控制div移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js键盘控制div移动，解决停顿问题
12-16 219
问题版本代码如下： 1 2 3 4 ...
Javascript控制DIV上下移动(仿265移动特效)
qtvb1987的专栏
07-14 1610
<br /><!DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb23
原生js实现键盘控制div移动且解决停顿问题
10-20
主要给大家介绍了如何利用原生js实现键盘控制div移动，并且解决在移动过程中的停顿问题，文中给出了详细的示例代码，相信对大家的理解和学习很有帮助，下面跟着小编一起来看看吧。
js实现键盘控制DIV移动的方法
10-24
主要介绍了js实现键盘控制DIV移动的方法,以实例形式完整的讲述了js控制div移动所涉及的css、js与html使用技巧,需要的朋友可以参考下
js之按键控制div移动
m0_67932301的博客
05-22 2686
js之按键控制div移动
JavaScript案例之按钮控制div移动
再中二也会被现实打败
10-09 327
JavaScript案例之按钮控制div移动
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 按键按下
JS实现多个DIV上下移动随意交换位置
weixin_45791806的博客
02-15 2576
<!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>JS实
JS实现键盘控制div全方位移动
huangqiang80的博客
01-13 863
JS实现键盘控制div全方位移动 创建onkeydown的全局响应事件，给div设置加速度，并控制div开始移动。 创建定时器控制div持续移动，这样可以防止div移动的卡顿现象。 创建onkeyup的全局响应事件，控制div停止移动。 div移动的卡顿现象是由于在按下键盘时，系统需要区分用户是否是持续输入，这个过程就会出现短暂的卡顿，用定时器可以巧妙的避免。 完整代码： <style lang="css"> #box1{ width: 100px;
根据键盘去控制div的移动
weixin_53374733的博客
09-18 247
【代码】根据键盘去控制div的移动。
JS中键盘方向键移动div（使用setInteral定时器优化后，按键按下div不会停滞，移动顺畅）
Fantasc的博客
08-15 288
分析：如果让方向键同时控制方向和速度，那么无法有好的使用效果，所以要将方向和速度分开控制。 使用定时器来控制方向，获取到对应的方向键的keyCode值就向不同的方向移动。 在按键松开的时候将方向清空，确保在按键松开时div不会在继续移动。 练习代码如下，对比分析，理清思路： 这是之前没有优化的代码，按键按下之后，div会停滞一会才开始移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
css3 js 移动大杂烩
西涛offbye-移动全栈技术博客
06-05 1140
沉寂了几个月后终于能写点东西出来了, 最近一直在移动方面探索, 查找了很多移动开发方面的博文 资料, 自认为这两个月收益良多, 整理一下, 分享也好, 记录成长历程也好, 感慨下吧 前段事件一直很纠结, 最后还是决定在移动web开发方面在深入一些, 一直以来都觉得移动设备上的浏览器对于css js等方面的支持是非常好的, 感觉很easy, 后来发现, 虽然不用在考虑过多的兼容性问题, 但 随
dom div移动解决停顿问题
weixin_34273479的博客
01-14 286
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ height:100px; width:100px; background:red; ...
JavaScript——用键盘wasd控制div移动
Chenbaby_的博客
11-27 3231
w：上    a：左   s：下  d：右 var div=document.getElementById('div'); document.onkeydown=function(e){ switch(e.keyCode){ case 65: div.style.left=parseInt(div.style.left)-10+"px"; break;
JS键盘移动div
xxhsym的博客
03-05 101
div块跟随上下左右键移动 <style type="text/css"> #div{ width:150px; height:150px; background-color:yellowgreen; position:absolute; } </style> <script type="text/javascript"> window.onload=fun...
js键盘控制div移动
最新发布
04-26
好的，我可以帮你解决这个问题。你可以尝试以下代码来实现js键盘控制div移动： HTML代码： ``` <div id="box"></div> ``` CSS代码： ``` #box { position: absolute; width: 100px; height: 100px; background-color: red; } ``` JavaScript代码： ``` var box = document.getElementById("box"); var left = 0; var top = 0; document.onkeydown = function(event) { switch (event.keyCode) { case 37: // 左箭头 left -= 10; box.style.left = left + "px"; break; case 38: // 上箭头 top -= 10; box.style.top = top + "px"; break; case 39: // 右箭头 left += 10; box.style.left = left + "px"; break; case 40: // 下箭头 top += 10; box.style.top = top + "px"; break; } }; ``` 这段代码使用键盘事件监听器来检测按下的方向键，并根据每个方向键的按键码来移动div元素的位置。你可以根据自己的需要来调整左、上、右和下的移动距离，以及div元素的位置、大小和背景颜色等属性。希望对你有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值