思绪：

1. 依据键盘的unicode值来推断是键盘上的哪一个键

2. 经由过程定位应用键盘事宜改编方块的top和left值

3. 经由过程开启定时器消弭长按键盘的初次卡顿状况

html

<div><div>

css

div{
    width:100px;
    height:100px;
    position:absolute;
    background:red;
}

js代码

window.onload=function(){
    var div=document.querySelector('div');
    var toLeft=toRight=toTop=toBottom=false;//设置方向变量，背面须要用作推断
    var step=5;//设置挪动的步进
    //开启一个定时器
    var timer=setInterval(function(){
        //依据方向变量举行推断
        if(toLeft){
            div.style.left=div.offsetLeft-step+'px';
        }
        if(toRight){
            div.style.left=div.offsetLeft+step+'px';
        }
        if(toTop){
            div.style.top=div.offsetTop-step+'px';
        }
        if(toBottom){
            div.style.top=div.offsetTop+step+'px';
        }
    },30);
    
    //按下方向键时
    document.onkeydown=function(ev){
        console.log(ev.keyCode);//搜检方向的unicode
        //左：37 上：38 右：39 下：40
        //用switch语句来推断按下了哪一个方向键
        switch(ev.keyCode){
            case 37:toLeft=true;break;
            case 38:toTop=true;break;
            case 39:toRight=true;break;
            case 40:toBottom=true;break;
        }
    }
    
   //松开按键时
   document.onkeyup=function(ev){
       //复原对应松开的值
       switch(ev.keyCode){
            case 37:toLeft=false;break;
            case 38:toTop=false;break;
            case 39:toRight=false;break;
            case 40:toBottom=false;break;
       }
   }

}