<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:150px;
height:150px;
background-color: red;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div></div>
<script>
var oDiv=document.querySelector("div");
// document.οnkeydοwn=function(){
// // console.log(event.keyCode);
// // if(event.keyCode==37){
// // oDiv.style.left=-20+"px";
// // }
// // if(event.keyCode==38){
// // oDiv.style.top=-20+"px";
// // }
// // if(event.keyCode==39){
// // oDiv.style.left=20+"px";
// // }
// // if(event.keyCode==40){
// // oDiv.style.top=20+"px";
// // }
// switch(event.keyCode){
// case 37 : oDiv.style.left=oDiv.offsetLeft - 10+"px"; break;
// case 38 : oDiv.style.top=oDiv.offsetTop - 10+"px"; break;
// case 39 : oDiv.style.left=oDiv.offsetLeft + 10+"px"; break;
// case 40 : oDiv.style.top=oDiv.offsetTop + 10+"px"; break;
// }//有问题,onkeydown每次点击的时候回停顿一会然后再执行。用循环计时器解决
// }
// 解决如何用按键让元素匀速走(而不是上述中的停顿一下再走)
// 给div设置四个自定义属性
oDiv.bLeft=oDiv.bRight=oDiv.bTop=oDiv.bBottom=false;
// 键盘按下
document.onkeydown=function(){
switch(event.keyCode){
case 37 : oDiv.bLeft = true; break;
case 38 : oDiv.bTop = true; break;
case 39 : oDiv.bRight = true; break;
case 40 : oDiv.bBottom = true; break;
}
}
// 键盘抬起
document.onkeyup=function(){
switch(event.keyCode){
case 37 : oDiv.bLeft = false; break;
case 38 : oDiv.bTop = false; break;
case 39 : oDiv.bRight = false; break;
case 40 : oDiv.bBottom = false; break;
}
}
divMove();
setInterval(divMove,25); //计时器开始的时候就执行这个函数divMove
function divMove(){
oDiv.bLeft && (oDiv.style.left=oDiv.offsetLeft - 5 + "px");
oDiv.bTop && (oDiv.style.top=oDiv.offsetTop - 5 + "px");
oDiv.bRight && (oDiv.style.left=oDiv.offsetLeft + 5 + "px");
oDiv.bBottom && (oDiv.style.top=oDiv.offsetTop + 5 + "px");
}
</script>
</body>
</html>
练习-用键盘控制元素
最新推荐文章于 2022-10-13 19:56:11 发布