js实现键盘控制移动div

最新推荐文章于 2025-01-15 07:56:15 发布

brokenH

最新推荐文章于 2025-01-15 07:56:15 发布

阅读量5k

点赞数 1

分类专栏： js小应用 javascript 文章标签： javascript web

本文链接：https://blog.youkuaiyun.com/qq_35034870/article/details/71424764

版权

javascript 同时被 2 个专栏收录

2 篇文章

订阅专栏

js小应用

0 篇文章

订阅专栏

简单原理：

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

实现效果：

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

代码块

html代码

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

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

javascriptt代码

window.onload=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.onkeydown=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.onkeyup=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");
        //防止下溢出
        }