用定时器来实现键盘中的事件

1.在实现键盘事件的时候要使用keyCode来确定我们按键值；在以下案例中要实现小方块的移动

小方块的样式实现：

 <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #ok{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>

我们会想到通过按动键盘上的上下左右的键盘来改变小方块的左侧偏移量和上方的偏移量从而使小方块上下左右的移动：一下就是简单的实现逻辑代码： 

<script>
    var dok = document.getElementById("ok");
    
    window.onkeydown = function(e){
       var l = dok.offsetLeft;
       var t = dok.offsetTop;
       if(e.keyCode === 37){
           l -= 5;
           
       }else if(e.keyCode === 38){
           t -= 5;
       }else if(e.keyCode === 39){
           l += 5;
       }else if(e.keyCode === 40){
           t += 5;
       }

       dok.style.left = l + 'px';
       dok.style.top = t + 'px';
    }

 

</script>

以上是我们实现通过键盘事件来实现小方块移动的效果；但是通过这种方式实现的小方块移动时非常不自然的，而通常我们不通过这种方法实现；

正确的打开方式，是我们通过计时器的方式来实现键盘事件； 例如一下代码：

<script>
    var dok = document.getElementById("ok");
 
    //合适的打开方式
    //计时器状态

    var isLeft = false;
    var isRight = false;
    var isTop = false;
    var isBottom = false;
    // 计时器
    var timer = null;
    // 键盘事件只修改状态
    window.onkeydown = function(e){
        if(e.keyCode === 37){
            isLeft = true;
        }else if(e.keyCode === 38){
            isTop = true;
        }else if(e.keyCode === 39){
            isRight = true;
        }else if(e.keyCode === 40){
            isBottom = true;
        }
    }

    //键盘抬起事件
    window.onkeyup = function(e){
        if(e.keyCode === 37){
            isLeft = false;
        }else if(e.keyCode === 38){
            isTop = false;
        }else if(e.keyCode === 39){
            isRight = false;
        }else if(e.keyCode === 40){
            isBottom = false;
        }
    }

    var sw = window.innerWidth;
    var sh = window.innerHeight;
    //通过计时器实现移动
    timer = setInterval(function(){
        var l = dok.offsetLeft;
        var t = dok.offsetTop;
        if(isLeft){l -=5;}
        // 每个方向都得判断
        if(isTop){t -= 5};
        if(isRight){l += 5}
        if(isBottom){t += 5};
        //边界处理
        l = (l<0)?0:l;
        l = (l>sw)?sw:l;
        t = (t<0)?0:t;
        t = (t>sh)?sh:t;
        dok.style.left = l + 'px';
        dok.style.top = t + 'px';

    },30)


</script>

通过定时器实现每30ms的小方块移动，我们会发现小方块的移动变得自然;