在HTML里面写一个简单的div,随便添加一点CSS样式,但是必须添加定位。如下图
然后就是js了,首先获取到这个div,并给页面绑定键盘事件和获取事件对象
用键盘事件的事件对象里的keyCode来确认键盘被点击时那个键被点击了,然后判断就可以在键触发时触发对应的操作,这里用两种方法判断
第一种if判断
第二种switch判断
总的来说,要先获取到需要移动的元素,给元素在可移动的区域绑定键盘事件,通过事件对象的keyCode来确认键盘的那个键被触发了,接着使用判断判断四个箭头键的那个方向的键被触发或者不是这四个键,判断好后就给对应的键执行对应的代码,而移动也是改变top和left的值来达到效果,这就是为什么我开始时说要写定位。