键盘事件
1. keydown当用户按下键盘上的任意键时触发,按下不动将重复触发
2. keyup 当用户释放键盘上的键时触发
e.keyCode 键码值 判断按键的标准
案例:键盘控制div移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘控制div移动</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#ok{
width: 100px;
height: 100px;
background-color: pink;
background-image: url(../img/1.jpg);
background-size: cover;
background-position: center center;
position: absolute;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div id="ok"></div>
</body>
1.不合适:div运动不自然案例
<script>
var dOK = document.getElementById('ok');
window.onkeydown = function(e) {
var l = dOK.offsetLeft;
var t = dOK.offsetTop;
if (e.keyCode === 37) {
l -=5;
} else if (e.keyCode === 38) {
t -=5;
} else if (e.keyCode === 39) {
l += 5;
} else if (e.keyCode === 40) {
t +=5;
}
dOK.style.left = l + 'px';
dOK.style.top = t + 'px';
}
</script>
2. 合适:计时器 + 状态
<script>
var dOK = document.getElementById('ok');
状态
var isLeft = false;
var isTop = false;
var isRight = false;
var isBottom = false;
计时器
var timer = null;
键盘事件:只修改状态
window.onkeydown = function(e) {
if ( e.keyCode === 37) {
isLeft = true;
} else if ( e.keyCode === 38) {
isTop = true;
} else if ( e.keyCode === 39) {
isRight = true;
} else if ( e.keyCode === 40) {
isBottom = true;
}
}
window.onkeyup = function(e) {
if ( e.keyCode === 37) {
isLeft = false;
} else if ( e.keyCode === 38) {
isTop = false;
} else if ( e.keyCode === 39) {
isRight = false;
} else if ( e.keyCode === 40) {
isBottom = false;
}
}
通过计时器实现移动
timer = setInterval(function() {
var l = dOK.offsetLeft;
var t = dOK.offsetTop;
if (isLeft) { l -= 5; }
if (isTop) { t -= 5; }
if (isRight) { l +=5; }
if (isBottom) { t +=5; }
dOK.style.left = l + 'px';
dOK.style.top = t + 'px';
}, 30)
</script>