欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS之键盘控制div移动

程序员文章站 2022-07-08 07:58:08
...

普通实现

<!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>