今天学到了几个新的指令,我们来利用这些指令来实现一个移动div的功能
onkeydown//键盘按下
onkeyup//键盘松开
keyCode//获取键盘按下的值
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script src="common.js"></script>
<script>
window.onload=function(){
document.onkeydown=function(event){
event=event|| window.event;
var box=document.getElementById("box");
//获取按键
//左37 上38 右39 下40
console.log(event.keyCode);
switch(event.keyCode){
case 37://左
box.style.left=box.offsetLeft-10+"px";
break;
case 39://右
box.style.left=box.offsetLeft+10+"px";
break;
case 38://上
box.style.top=box.offsetTop-10+"px";
break;
case 40://下
box.style.top=box.offsetTop+10+"px";
break;
}
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>