js用键盘控制div移动

首先，我们要知道，键盘对应的ASCII码（keycode码）。点击此处查看（转载）。方向键，左，上，右，下，分别为37，38，39，40。

然后，当按下键盘按键的时候，用event.keyCode获取按键的keycode码。用switch函数case分支，对应键值执行相关命令。

先写一个div

<div id="box"></div>

写样式  (一定要position，不然无法移动)

#box{
        width: 50px;
        height: 50px;
        background: red;        position:absolute;
        top:20%;
        left: 20%;
    }

js（注意大小写)

 

var box = document.querySelector("#box");
        onkeydown = function (event) {
            switch (event.keyCode) {
                case 37:
                box.style.left = box.offsetLeft - 20 + "px";
                    break; //向左移动

                case 38:
                box.style.top = box.offsetTop - 20 + "px";
                    break; //向上移动

                case 39:
                box.style.left = box.offsetLeft + 20 + "px";
                    break; //向右移动

                case 40:
                box.style.top = box.offsetTop + 20 + "px";
                    break; //向下移动
            }
            }

这样就ok了。

来源：https://www.cnblogs.com/fastfastbiubiu/p/11693933.html