JS之键盘控制div移动

最新推荐文章于 2022-10-09 22:11:18 发布

liurongsheng123

最新推荐文章于 2022-10-09 22:11:18 发布

阅读量1k

点赞数

分类专栏：前端文章标签： keyCode onkeydown onkeyup

本文链接：https://blog.csdn.net/liurongsheng123/article/details/79586696

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

普通实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>键盘控制div移动</title>
        <style type="text/css">
            .box{
                width:400px;
                height:600px;
                border:1px blue solid;
                position:absolute;
                margin-left:300px;
            }
            #item{
                width:80px;
                height:80px;
                background-color:red;
                position:absolute;
                left:0px;
                top:0px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div id="item"></div>
        </div>
    </body>
    <script type="text/javascript">
        var item = document.getElementById("item");
        var box = document.getElementsByClassName('box')[0];
        document.onkeydown=function(ev){
            if(ev.keyCode==39){
                console.log(box.clientWidth);
                if(item.offsetLeft >= box.clientWidth - item.offsetWidth){
                    item.style.left = item.offsetLeft + "px";
                }else{
                    item.style.left = item.offsetLeft + 4 + "px";
                }

            }
            if(ev.keyCode==37){
                if(item.offsetLeft <= 0){
                    item.style.left = item.offsetLeft + "px";
                }else{
                    item.style.left=item.offsetLeft - 4 + "px";
                }
            }   
            if(ev.keyCode==38){
                if(item.offsetTop <= 0){
                    item.style.top = item.style.top + "px";
                }else{
                    item.style.top=item.offsetTop - 3 + "px";
                }

            }
            if(ev.keyCode==40){
                if(item.offsetTop >= box.clientHeight - item.offsetHeight){
                    item.style.top = item.style.top + "px";
                }else{
                    item.style.top=item.offsetTop + 3 + "px";
                }
            }


        }
    </script>
</html>

代码优化

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .box{
                position: relative;
                border:5px black solid;
                width:300px;
                height:480px;
                margin:20px auto;
            }
            .item{
                width:45px;
                height:80px;
                background-color:gray;
                position:absolute;
                top:0px;
                left:0px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item"></div>
        </div>
    </body>
    <script type="text/javascript">
        var item = document.getElementsByClassName('item')[0];
        var box = document.getElementsByClassName('box')[0];
        var key=[false,false,false,false];
        document.onkeydown = function(ev){
            key[ev.keyCode-37] = true;
        }
        document.onkeyup = function(ev){
            key[ev.keyCode-37] = false;
        }
        setInterval(function(){
            var speed = 3;
            var iLeft =item.offsetLeft + ((key[0]*-1) + key[2])*speed;
            var iTop =item.offsetTop + ((key[1]*-1) + key[3])*speed;

            //限制left
            var maxX = box.clientWidth - item.offsetWidth;
            iLeft = iLeft < 0 ? 0 : (iLeft > maxX ? maxX : iLeft);

            //限制top
            var maxY = box.clientHeight - item.offsetHeight;
            iTop = iTop < 0 ? 0 : (iTop > maxY ? maxY : iTop);

            item.style.left = iLeft + "px";
            item.style.top =  iTop + "px";
        },20)
    </script>
</html>