js实现键盘控制移动div

简单原理:

获取键盘keyCode,按一定规则改变指定div的边距实现控制指定div的移动。需注意的是要考虑div的溢出问题,要编写函数限制移动范围

实现效果:

用户通过键盘的指定键指定div在web页面内移动。

代码块

html代码

<body>
<div id="d1">
<pre>您可以使用键盘进行如下操作:

上:↑ 下:↓ 左:← 右:→ 
pre>
div>
<div id="d2">我可以移动div>
body>

javascriptt代码

window.οnlοad=function(){
    var div=document.getElementById('d2');
    var keyT=keyB=keyL=keyR=false;//设置指定键初始值
    setInterval(function(){//设置定时器,键盘按下每隔10毫秒执行一次移动操作
        if(keyL){
            div.style.left=div.offsetLeft-10+"px";
            }
        else if(keyR){
            div.style.left=div.offsetLeft+10+"px";
            }
        if(keyT){
            div.style.top=div.offsetTop-10+"px";
            }
        else if(keyB){
            div.style.top=div.offsetTop+10+"px";
            };  
            limit()//limit()函数限制div移动防止溢出
        },10);

    document.οnkeydοwn=function(event){//keydown事件,keyCode绑定移动键位
        var event=event||window.event;
        switch(event.keyCode){
            case 37:
                keyL=true;//if语句执行,div左移动
                return;
            case 38:
                keyT=true;
                return;
            case 39:
                keyR=true;
                return;
            case 40:
                keyB=true;
                return;
            }
        }
    document.οnkeyup=function(event){//keyup事件,用户松开按键时移动停止
        var event=event||window.event;
        switch(event.keyCode){
            case 37:
                keyL=false;
                break;
            case 38:
                keyT=false;
                break;
            case 39:
                keyR=false;
                break;
            case 40:
                keyB=false;
                break;
            }
        }
    };

limit()函数

function limit(){
        (div.offsetLeft<=0)&&(div.style.left=0);
        //防止左溢出
        (div.offsetTop<=0)&&(div.style.top=0);
        //防止上溢出
        (div.offsetLeft+div.offsetWidth>=document.documentElement.clientWidth)&&(div.style.left=document.documentElement.clientWidth-div.offsetWidth+"px");
        //防止右溢出
        (div.offsetTop+div.offsetHeight>=document.documentElement.clientHeight)&&(div.style.top=document.documentElement.clientHeight-div.offsetHeight+"px");
        //防止下溢出
        }

你可能感兴趣的:(javascript,js小应用)