js 练习之键盘移动div

最新推荐文章于 2022-10-06 00:57:53 发布

autm许

最新推荐文章于 2022-10-06 00:57:53 发布

阅读量76

点赞数

分类专栏：前端 js

本文链接：https://blog.csdn.net/qq_17108919/article/details/116058112

版权

前端同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

26 篇文章 2 订阅

订阅专栏

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

<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>js 练习之键盘移动div</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        #box {
            width: 100px;
            height: 100px;
            background: green;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        window.onload = function () {
            var box = document.getElementById('box');
            var speed = 10; // 速度10px
            var ew = box.clientWidth; // 获取元素宽度
            var eh = box.clientHeight; // 获取元素高度
            var ex = 0;
            ey = 0;
            var timer = setInterval(function () {
                box.style.left = ex + 'px'
                box.style.top = ey + 'px'
            }, 30)
            document.onkeydown = function (event) {
                event = event || window.event;
                var x = box.offsetLeft;
                var y = box.offsetTop;
                var maxw = document.body.clientWidth; // 最大宽度
                var maxh = document.body.clientHeight; // 最大高度
                ex = x;
                ey = y;
                //按住ctrl键 速度15
                if (event.ctrlKey) {
                    speed = 15
                }
                //按住shift键 速度20
                if (event.shiftKey) {
                    speed = 20
                }
                /*
                event.keyCode
                37：向左
                38: 向上
                39：向右
                40：向下
                */
                switch (event.keyCode) {
                    case 37:
                        // 判断向左是否到达最小边界
                        if (x - speed < 0) {
                            ex = 0
                        } else {
                            ex = x - speed
                        }
                        break;
                    case 38:
                        // 判断向上是否到达最小边界
                        if (y - speed < 0) {
                            ey = 0
                        } else {
                            ey = y - speed
                        }
                        break;
                    case 39:
                        // 判断向右是否到达最大边界
                        if (x + speed + ew >= maxw) {
                            ex = maxw - ew
                        } else {
                            ex = x + speed
                        }
                        break;
                    case 40:
                        // 判断向下是否到达最小边界
                        if (y + speed + eh >= maxh) {
                            ey = maxh - eh
                        } else {
                            ey = y + speed
                        }
                        break;
                }
                // box.style.left = ex + 'px'
                // box.style.top = ey + 'px'
            }
            document.onkeyup = function () {
                speed = 10
            }
        }
    </script>
</body>

</html>

autm许

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 练习之键盘移动div

<!DOCTYPE html><html lang="en"><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>js
复制链接

扫一扫