用setInterval创建一个无延迟方向键移动的div

最新推荐文章于 2024-03-17 17:15:54 发布

Xuan闹

最新推荐文章于 2024-03-17 17:15:54 发布

阅读量262

点赞数

文章标签： JavaScript 键盘事件定时器 setInterval

本文链接：https://blog.csdn.net/qq_42017281/article/details/88830793

版权

原来想给键盘输入绑定定时函数，发现按键第一次输入和第二次输入有延迟，而且多次之后定时器开启的太多，因此换成定时器只负责四个方向的移动，把方向键按下的keyCode赋给另一个变量dir表示方向，speed设置速度，松开按键将速度设置为0停止移动，也可以将dir设置为0

<style>
			#box{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
				top: 0;
			}
</style>
<script>
				var box = document.getElementById("box");
				var dir = 0;
				var speed = 10;
				setInterval(function(){//将移动的工作交给定时器
				if(dir === 39){	//→
					box.style.left = box.offsetLeft + speed + "px";
				}else if(dir === 37){	//←
					box.style.left = box.offsetLeft - speed + "px";
				}else if(dir === 38){	//↑
					box.style.top = box.offsetTop - speed + "px";
				}else if(dir === 40){	//↓
					box.style.top = box.offsetTop + speed + "px";
				}
			},30);
			document.onkeydown = function(ev){//按键只改变dir变量的值决定方向
			// console.log(box.offsetLeft,box.offsetTop);
				speed = 10;
				if(ev.ctrlKey){
					speed = 50;
				}
				dir = ev.keyCode;
				document.onkeyup = function(){//按键松开时将速度设置为0停止移动
					speed = 0;
				}
			}
</script>
<body>
	<div id="box"></div>
</body>

…