Js键盘事件:按下上下左右键使div在页面上下左右移动

最新推荐文章于 2024-04-19 08:49:22 发布

你是我遥远万里最牵挂的猪

最新推荐文章于 2024-04-19 08:49:22 发布

阅读量5.3k

点赞数 5

分类专栏： javascript 文章标签： js 前端键盘事件

本文链接：https://blog.csdn.net/Leejinian888/article/details/94436784

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        var box = document.querySelector(".box");   //获取元素
        // console.log(box);
        onkeydown = function () {       //键盘事件
            // console.log(event.keyCode);      //用于获取键盘中上下左右键的ASCII码
            var speed = 10              //设置移动距离和方式
            if (event.ctrlkey) {
                speed = 50;
            }
            switch (event.keyCode) {                //用switch来设置移动方向
                case 37:
                    box.style.left = box.offsetLeft - speed + "px";
                    break;
                case 39:
                    box.style.left = box.offsetLeft + speed + "px";
                    break;
                case 38:
                    box.style.top = box.offsetTop - speed + "px";
                    break;
                case 40:
                    box.style.top = box.offsetTop + speed + "px";
                    break;
            }
        }

    </script>
</body>

</html>

					**效果图如下**

在这里插入图片描述

你是我遥远万里最牵挂的猪

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
Js键盘事件:按下上下左右键使div在页面上下左右移动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫