JS之键盘控制div移动
程序员文章站
2022-07-08 07:58:08
...
普通实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘控制div移动</title>
<style type="text/css">
.box{
width:400px;
height:600px;
border:1px blue solid;
position:absolute;
margin-left:300px;
}
#item{
width:80px;
height:80px;
background-color:red;
position:absolute;
left:0px;
top:0px;
}
</style>
</head>
<body>
<div class="box">
<div id="item"></div>
</div>
</body>
<script type="text/javascript">
var item = document.getElementById("item");
var box = document.getElementsByClassName('box')[0];
document.onkeydown=function(ev){
if(ev.keyCode==39){
console.log(box.clientWidth);
if(item.offsetLeft >= box.clientWidth - item.offsetWidth){
item.style.left = item.offsetLeft + "px";
}else{
item.style.left = item.offsetLeft + 4 + "px";
}
}
if(ev.keyCode==37){
if(item.offsetLeft <= 0){
item.style.left = item.offsetLeft + "px";
}else{
item.style.left=item.offsetLeft - 4 + "px";
}
}
if(ev.keyCode==38){
if(item.offsetTop <= 0){
item.style.top = item.style.top + "px";
}else{
item.style.top=item.offsetTop - 3 + "px";
}
}
if(ev.keyCode==40){
if(item.offsetTop >= box.clientHeight - item.offsetHeight){
item.style.top = item.style.top + "px";
}else{
item.style.top=item.offsetTop + 3 + "px";
}
}
}
</script>
</html>
代码优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
position: relative;
border:5px black solid;
width:300px;
height:480px;
margin:20px auto;
}
.item{
width:45px;
height:80px;
background-color:gray;
position:absolute;
top:0px;
left:0px;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
<script type="text/javascript">
var item = document.getElementsByClassName('item')[0];
var box = document.getElementsByClassName('box')[0];
var key=[false,false,false,false];
document.onkeydown = function(ev){
key[ev.keyCode-37] = true;
}
document.onkeyup = function(ev){
key[ev.keyCode-37] = false;
}
setInterval(function(){
var speed = 3;
var iLeft =item.offsetLeft + ((key[0]*-1) + key[2])*speed;
var iTop =item.offsetTop + ((key[1]*-1) + key[3])*speed;
//限制left
var maxX = box.clientWidth - item.offsetWidth;
iLeft = iLeft < 0 ? 0 : (iLeft > maxX ? maxX : iLeft);
//限制top
var maxY = box.clientHeight - item.offsetHeight;
iTop = iTop < 0 ? 0 : (iTop > maxY ? maxY : iTop);
item.style.left = iLeft + "px";
item.style.top = iTop + "px";
},20)
</script>
</html>
上一篇： Android 重写返回键
下一篇： 单输入框表单enter后页面刷新