t08 小练习 div移动（利用定时器解决开头卡顿问题）

最新推荐文章于 2021-02-01 01:09:23 发布

weixin_43708170

最新推荐文章于 2021-02-01 01:09:23 发布

阅读量138

点赞数

分类专栏：练习文章标签： js

本文链接：https://blog.csdn.net/weixin_43708170/article/details/107427999

版权

练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

t08 小练习 div移动（利用定时器解决开头卡顿问题）

功能

方向键控制div移动
利用定时器解决长按方向键移动的第一下卡顿的问题

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div移动（利用定时器解决开头卡顿问题）</title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * -div移动有两个要素，一个是方向，一个是速度
				 * - 这里将控制方向和控制速度分离
				 */
				var sp = 10;
				var dir = 0;
				var timer = setInterval(function(){
					//左37，上38，右39，下40
					if(dir == 37){					
						box1.style.left = box1.offsetLeft - sp+"px";
					}else if(dir == 38){
						box1.style.top = box1.offsetTop - sp+"px";
					}else if(dir == 39){
						box1.style.left = box1.offsetLeft + sp+"px";
					}else if(dir == 40){
						box1.style.top = box1.offsetTop + sp+"px";
					}
				},100);
				var box1 = document.getElementById("box1");
				document.onkeydown = function(event){
					event = event || window.event;
					dir = event.keyCode;
					//按下ctrl键加速
					if(event.ctrlKey){
						sp = 100;
					}else{
						sp = 10;
					}
				};
				document.onkeyup = function(){
					dir = 0;
				};
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>