/*
* 使div可以根据不同的方向键向不同的方向移动
* 按左键，div向左移
* 按右键，div向右移
* 37 左
* 38 右
* 39 上
* 40 下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background: red; position: absolute; } </style> <script type="text/javascript"> /* * 使div可以根据不同的方向键向不同的方向移动 * 按左键，div向左移 * 按右键，div向右移 * 37 左 * 38 右 * 39 上 * 40 下 */ window.onload = function(){ //为document绑定按键按下的事件 document.onkeydown = function(){ console.log(event.keyCode) event = event || window.event; switch(event.keyCode){ case 37: box1.style.left = box1.offsetLeft-10 +"px"; break; case 38: box1.style.left = box1.offsetLeft+10 +"px"; break; case 39: box1.style.top = box1.offsetTop-10 +"px"; break; case 40: box1.style.top = box1.offsetTop+10 +"px"; break; } } } </script> </head> <body> <div id="box1"> </div> </body> </html>
原文：https://www.cnblogs.com/caicaihong/p/9330965.html