.108修改键盘移动div-CSDN博客

本文链接：https://blog.csdn.net/sanda_nd/article/details/124406784

对之前的键盘移动div练习进行修改，使其更加顺滑

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改键盘移动div</title>
    <script>
        window.onload = function () {
            var box = document.getElementById('box');
            // 方向
            var dir = 0;
            // 速度
            var speed = 10;
            // 开启定时器控制div移动
            setInterval(function () {
                /*
                   左 37
                   右 39
                   上 38
                   下 40
               
               */
                switch (dir) {
                    case 37:
                        box.style.left = box.offsetLeft - speed + 'px';
                        break;
                    case 38:
                        box.style.top = box.offsetTop - speed + 'px';
                        break;

                    case 39:
                        box.style.left = box.offsetLeft + speed + 'px';
                        break;
                    case 40:
                        box.style.top = box.offsetTop + speed + 'px';
                        break;
                }
            }, 30);


            // 按钮按下
            document.onkeydown = function (event) {
                event = event || window.event;

                // ctrl 和方向键按住才有效果 
                if (event.ctrlKey) {
                    speed = 50;
                }
                dir = event.keyCode;

            };
            // 按键松开
            document.onkeyup = function () {
                dir = 0;
                speed = 10;
            };
        };

    </script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>


</html>

</html>