标签：case break false 小方块 demo 键盘 step div ev

思路：

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;
       }
   }

}

标签：case,break,false,小方块,demo,键盘,step,div,ev
来源： https://www.cnblogs.com/homehtml/p/12488897.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。