键盘控制元素移动

开发工具与关键技术： VS 2019    单词                      

作者：魏钦

撰写时间：2022/4/28

1. 首先打开我们的VS软件，CTRL+ N新建一个HTML文档，在body标签里放一个script标签，作为我们写JS的区域。
2. 在script标签里，window.onload(关键字）等于号匿名函数：function（），再一个花括号，加载事件就这样写好了，加载事件基本每个页面都需要的，写法如下。

window.onload = function(){}

1. 接下来就是获取所要控制的对象了，在script标签外放一个div，然后设置他的css属性，在body标签外放一个style标签（样式），形成style标签会有两个，一个是没有斜杠，一个是有的，又斜杠的结束标签，然后在style标签两个中间回车换行，然后直接div花括号换行写你所要呈现效果的单词和参数，写法如下，阿拉伯数字的可以自行设置。

<style>

    div{

        width: 100px;

        height: 100px;

        background-color: pink;

        position: absolute;

        top: 100px;

        left: 100px;

    }

</style

1. 回到加载事件里面获取div,首先声明一个变量var空格然后任意打一个单词或者字母，等于号，然后document(文档的意思)，用一个点符号表示间隔，getElementsByNane(意思是用标签名来获取元素)，然后括号，括号里面包裹住一个双引号，双引号里面包裹div，再括号后面放一个中括号，中阔里面放个0，这就是获取元素的基本格式，操作如下。

var divObj = document.getElementsByTagName("div")[0];

1. 获取完元素那就要写一个键盘按下的判断，首先需要获取整个文档，document（文档的意思），点符号隔开，然后关键字onkeydown(按键抬起)，等于function(e)注意：这个就不叫匿名函数了，他现在的名字就是他括号里面，然后一个花括号，操作如下。

document.onkeydown = function(e){}

1. 接下来在花括号里写判断，我这用的是switch判断，如果感兴趣的可以用其他判断方法，switch加括号，括号里放上一个括号里面的字母，（e.keyCode）keyCode这个是获取你键盘上的键码，每个按键都有属于子的键码，然后花括号，在花括号写条件，用case空格写你所要实现的效果，写完用：符号结尾，然后换行，用刚才获取元素的任意字母，用点隔开，style(样式).然后选择方向和参数就行了，写法如下。

switch(e.keyCode){

                    case 37:

                        divObj.style.left = divObj.offsetLeft - 20 + "px";

                        break;

                    case 38:

                        divObj.style.top = divObj.offsetTop - 20 + "px";

                        break;

                    case 39:

                        divObj.style.left = divObj.offsetLeft + 20 + "px";

                        break;

                    case 40:

                        divObj.style.top = divObj.offsetTop + 20 + "px";

                        break;

                }