自定义键盘按键之小方块移动

最新推荐文章于 2020-08-15 16:13:37 发布

奥申

最新推荐文章于 2020-08-15 16:13:37 发布

阅读量685

点赞数

分类专栏： JavaScript 文章标签：自定义按键

本文链接：https://blog.csdn.net/qq_44890539/article/details/102576193

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

自定义按键之小方块移动

我所做的只是简单的自定义键盘按钮使小方块移动，不要想得太复杂，看了我的讲解之后会觉得非常简单。
先看下效果 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>

一个正在努力的程序员
感谢观看！！

奥申

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义键盘按键之小方块移动

自定义按键之小方块移动我所做的只是简单的自定义键盘按钮使小方块移动，不要想得太复杂，看了我的讲解之后会觉得非常简单。先看下效果 gif 图1. 分析：1.1：需要先定义四个输入框和一个div,div需设置绝对定位：position: absolute;1.2：获取键值：event.Code，从输入框中获取用户按下的键盘的值，存起来。1.3：获取完键值后，再根据存起来的键值找到按键所在...
复制链接

扫一扫

专栏目录