您的位置：首页 > Web前端 > JavaScript

JS键盘事件及键盘控制上下左右移动

2018-10-06 20:01 225 查看

JS键盘事件

键盘事件：完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。

keydown：按键按下

keyup：按键抬起

keypress：按键按下抬起

实例：

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--<script src="js/dom01.js"></script>-->
<style>
#box{
width: 400px;
height: 400px;
background: burlywood;
margin: auto;
position: relative;
overflow: hidden;
}
#fj{
width: 50px;
height: 50px;
background: red;
position: absolute;
top: 300px;
left: 150px;
}
</style>
</head>
<body>
<div id="box">
<div id="fj">
小飞机
</div>
</div>
</body>
<script>
var fj=document.getElementById("fj");
document.onkeydown=function(e){ //键盘按下事件绑定
var e=window.event||e;
switch(e.keyCode){
case 37: //左
fj.style.left=Math.max(0,fj.offsetLeft-5)+"px";
break;
case 38: //上
fj.style.top=Math.max(0,fj.offsetTop-5)+"px";
break;
case 39:  //右
fj.style.left=Math.min(350,fj.offsetLeft+5)+"px";
break;
case 40:  //下
fj.style.top=Math.min(350,fj.offsetTop+5)+"px";
break;
}
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航