解决键盘在控制box加速移动时的卡顿问题

最新推荐文章于 2024-05-24 09:46:01 发布

阮太太

最新推荐文章于 2024-05-24 09:46:01 发布

阅读量195

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_38409767/article/details/98592849

版权

web 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    #box1{
    	width: 100px;
    	height: 100px;
    	position: absolute;
    	background-color: red;
    }
	</style>
	<script type="text/javascript">
	//为document绑定一个按键按下的事件
     window.onload=function(){
     	//设置一个变量，来表示移动的速度
     	var speed = 10;
     	//创建一个变量来表示方向
     	//通过修改dir来改变box1的移动方向
     	var dir = 0;
     	/*
     	 * 因为onkeydown同时控制速度，又控制移动时间所以会出现卡顿
     	 * 开启一个定时器，来控制div的移动
     	 */
         setInterval(function(){
         	switch(dir){
         		case 37:
         		box1.style.left = box1.offsetLeft - speed+"px";
         		break;
         		case 38:
         		box1.style.top= box1.offsetTop - speed+"px";
         		break;
         		case 39:
         		box1.style.left = box1.offsetLeft + speed+"px";
         		break;
         		case 40:
         		box1.style.top = box1.offsetTop + speed + "px";
         		break;
         	}
         },30)
         document.onkeydown = function(event){
         	var box1 = document.getElementById("box1");
         	event = event||window.event;
         	
         	// console.log(event.keyCode);
         	/*
         	输出的左键是37，上是38，右是39，下是10
         	 */
         	if(event.keyCode){
         		speed = 100;//设置按着ctrl再按方向键就是加速
         	}else{
         		speed = 10;
         	}
         	dir=event.keyCode;
         	//当案件松开时，div不再有移动
         	document.onkeyup = function(){
         		dir = 0;
         	}
         }
     }

	</script>
</head>
<body>
	<div id="box1"></div>
</body>
</html>