用键盘控制图标移动

发表于 | 分类于 ， ， | 阅读次数：
本文字数： 1.7k | 阅读时长 ≈ 2 分钟

之前几个小项目，我都是照着代码敲下来。但是发现这样的效果并不是特别好，所以这个项目我改变了策略，打算先看懂代码，然后再自己手敲。
这份代码我一直想读一读，读下来之后也发现不是特别的困难，也没有什么特别重要的新知识。
点此体验
代码并没有什么地方需要解释的，就直接呈出来了。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>键盘控制图标</title>
	<link rel="stylesheet" href="keyScrollball.css"/>
	<script src="keyScrollball.js"></script>
</head>
<body>
	<div id="box"></div>
</body>
</html>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
@charset "utf-8";
body{
	background:#CCC;
}
div{
	width:60px;
	height:60px;
	background:brown;
	position:absolute;
	/*属性允许向元素添加圆角*/
	border-radius:30px;
}

JAVASCRIPT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
window.onload=function(){
	var box=document.getElementById("box");
	//网页可见区域宽，兼容各种浏览器
	var MapWidth=document.body.clientWidth||document.documentElement.clientWidth;
	//网页可见区域高，兼容各种浏览器
	var MapHeight=document.body.clientHeight||document.documentElement.clientHeight;
	var timer=null;
	document.onkeydown=function(ev){
		var ev=ev||window.event;
		clearInterval(timer);
		//只要键盘按着每隔10ms移动一次
		timer=setInterval(function(){
			switch(ev.keyCode){
				case 37: 
					if(box.offsetLeft>0){
						box.style.left=box.offsetLeft-10+"px";
					}
					break;
				case 38:
					if(box.offsetTop>0){
						box.style.top=box.offsetTop-10+"px";
					}
					break;
				case 39:
					if(box.offsetLeft<MapWidth-box.offsetWidth){
						box.style.left=box.offsetLeft+10+"px";
					}
					break;
				case 40:
					if(box.offsetTop<MapHeight-box.offsetHeight){
						box.style.top=box.offsetTop+10+"px";
					}
					break;
			}
		},10);
	}
	document.onkeyup=function(){
		clearInterval(timer);
	}
}