Js键盘事件实现元素上下左右动态移动（内含源码）

本文主要讲解如何利用JavaScript控制键盘的上下左右键同时利用监听键盘事件来实现对一个元素的控制。键盘控制，本质上是监听到用户对键盘使用，并在监听后实现一些方法使得元素可以跟随键盘进行移动。

如何监听键盘事件

Js监听键盘有以下几种方法：

onkeydown：某个键盘按键被按下
onkeypress：某个键盘按键被按下并且松开。
onkeyup：某个键盘按键被松开。
我们想要控制键盘上下左右键，主要用到的就是onkeydown这个关键词。它的语法格式为：document.onkeydown(),它有一个自带参数event，里面装着可能当下键盘按键中的一些属性值，当中有一个类似身份证号的属性叫keyCode，那么通过调用这个keyCode属性，即可知道当前按键的keyCode是什么，从而可以在监听事件中对某个元素进行绑定并且实现上下左右的功能。
举例：

javascript">document.onkeydown=function(e){
	console.log(e.keyCode)
}

上述代码则是实现了一个键盘监听事件，这个事件可以判断当前页面中哪些键盘按键被按下，且打印出被按下的按键的唯一值，如按空格键打印32，按d键打印68等等。从而我们知道上下左右键分别是38、40、37、39.接下来就是动态移动元素。

利用onkeydown实现动态移动元素

解决路线：

定义id为demo的元素及其基本样式
CSS设置position：absolute；并设置初始位置。
定义三个变量，分别存储id为demo的元素的style、左右位置、上下位置
使用键盘监听事件onkeydown，并调用e.keyCode判断是上(38)、下(40)、左(37)、右(38)。
如果是左，则对左右变量做–操作（我设置的position设置的是left，left值越大离左侧越远），然后赋值给demo.left,利用字符串拼接左右位置变量+‘px’，如果是右则做++操作。
如果是上，则对上下变量做–操作（我设置的position设置的是top，top值越大离上部越远），然后赋值给demo.top,如果是下，则做++操作。
具体源码：

javascript"><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		body {
			position: relative;
		}

		.demo {
			width: 50px;
			height: 50px;
			border: 1px solid gray;
			background-color: antiquewhite;
			border-radius: 50%;
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
	<body>
		<div class="demo" id="demo">

		</div>
		<script>
			let demo = document.getElementById('demo').style
			let left = 0;
			let top1 = 0;
			document.onkeydown = function(e) {
				// console.log(top1)
				switch (e.keyCode) {
					case 38:
						top1--;
						demo.top = top1 + 'px';
						break;
					case 40:
						top1++;
						demo.top = top1 + 'px';
						break;
					case 37:
						left--;
						demo.left = left + 'px';
						break;
					case 39:
						left++;
						demo.left = left + 'px';
						break;
				}
			}
		</script>
	</body>
</html>