使用js实现键盘点击小球发生位移

《专题技术文献》

开发工具与关键技术：Adobe Dreamweaver CC 2017
作者：落雨的天_萧瑟
撰写时间：2019.1.18

             使用js实现键盘点击小球发生位移

第一步：我们先搭好结构

第二步：我们把搭好的框架的css样式写出来
*{ margin: 0; padding: 0;}
.div1 { width: 300px; height: 300px; border: 1px solid #aaa; position: relative; }
.div1 ul li { width: 100%; height: 100px; list-style: none; border-bottom: 1px solid #aaa; }
.div1 ul li:last-child { border-bottom: 0px solid #aaa; }
.div2 { width: 100px; height: 100px; border-radius: 50%; background: #489194;
position: absolute; top: 0px; left: 0px; }
布局和样式都弄好了，接下来就是最主要的部分了利用js实现效果。
第三步：首先写一个window.onload 加载事件，然后再用变量接收我们在HTML中的id，
并且还要获取到ul标签里面的li标签。

为了使div2在指定的li标签里面位移所以我们需要用到for循环同时获取li标签的长度，然后再写一个按键点击事件：onkeydownName.onkeydown = function (event) {}；
window.event.keyCode == 83（83是键盘码）获取具体的按键。
为了使div2可以上移下移都可以，那么我们就需要用到if（）{} else {}；了，如果if里面的条件成立，那么就执行if里面的代码，否则就执行else if里面的代码。当然这还不够，在if里面我们还需要再去判断div2在li里面位移方向，那么再用一个if。。。Else 来判断，如果成立那么久向下位移，否则就执行else if的代码且向上位移，如果都不成立那么就不执行代码。