自定义按键之小方块移动
我所做的只是简单的自定义键盘按钮使小方块移动,不要想得太复杂,看了我的讲解之后会觉得非常简单。
先看下效果 gif 图
1. 分析:
1.1:需要先定义四个输入框和一个div,div需设置绝对定位:position: absolute;
1.2:获取键值:event.Code,从输入框中获取用户按下的键盘的值,存起来。
1.3:获取完键值后,再根据存起来的键值找到按键所在的位置。
1.4:根据自己设置的px,小方块移动上下左右。
1.5:onkeyup:按键点下后松开
1.6:onkeydown:按键点下
分析完之后,下面是代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义按键</title>
</head>
<style>
#div1{
margin: auto;
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<body onkeydown="getStr()">
<center>
上<input type="text" id="top" onkeyup="getId(this.id)"/>
下<input type="text" id="bottom" onkeyup="getId(this.id)" />
左<input type="text" id="left" onkeyup="getId(this.id)" />
右<input type="text" id="right" onkeyup="getId(this.id)" />
<div id="div1"></div>
<script>
var getTop = null;
var getBottom = null;
var getLeft = null;
var getRight = null;
/**
* 获取按键点击之后的键值
*/
function getId(eleId){
if(eleId == "top"){
getTop = event.keyCode;
}
if(eleId == "bottom"){
getBottom = event.keyCode;
}
if(eleId == "left"){
getLeft = event.keyCode;
}
if(eleId == "right"){
getRight = event.keyCode;
}
}
/**
* 获取按键的键值后,根据键值找到按钮进行移动
*/
function getStr(){
var i = event.keyCode ;
var divId = document.getElementById("div1");
if(i == getTop){
divId.style.top = divId.offsetTop - 50 + "px";
}
else if(i == getBottom){
divId.style.top = divId.offsetTop + 50 + "px";
}
else if(i == getLeft){
divId.style.left = divId.offsetLeft - 50 + "px";
}
else if(i == getRight){
divId.style.left = divId.offsetLeft + 50 + "px";
}
}
</script>
</center>
</body>
</html>
一个正在努力的程序员
感谢观看!!