[点晴永久免费OA]js实现上下左右按键使div移动

当前位置：点晴教程→点晴OA办公管理信息系统 →『经验分享&问题答疑』

admin

2022年8月22日 12:20 本文热度 958

知识点：

可以通过keyCode获取案件的编码，可以判断那个按键被按下

altKey、ctrlKey、shiftKey判断alt ctrl shift是否被按下

使div可以根据不同的方向移动

按左键，div向左移

按右键，div右移

按下键，div下移

按上键，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>Document</title>

    <style>

        #box1 {

            width: 100px;

            height: 100px;

            background-color: red;

            position: absolute;

        }

    </style>

    <script>

        /*

          使div可以根据不同的方向移动

           按左键，div向左移

           按右键，div右移

           ...

        */

        window.onload = function () {

            //为document绑定一个按键按下事件

            document.onkeydown = function (event) {

                event = event || window.event;

                console.log(event.keyCode);

 

                //定义一个变量speed

                var speed = 10;

 

                //如果按了ctrl以后，速度加快

                if (event.ctrlKey) {

                    speed = 50;

                }

                /*

                 37是左

                 38上

                 39右

                 40下

                */

                switch (event.keyCode) {

                    case 37:

                        box1.style.left = box1.offsetLeft - speed + "px";

                        break;

                    case 39:

                        box1.style.left = box1.offsetLeft + speed + "px";

                        break;

                    case 38:

                        box1.style.top = box1.offsetTop - speed + "px";

                        break;

                    case 40:

                        box1.style.top = box1.offsetTop + speed + "px";

                        break;

                }

            };

        };

    </script>

</head>

 

<body>

    <div id="box1"></div>

</body>

 

</html>

该文章在 2022/8/22 12:20:15 编辑过

关键字查询

实现

移动

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。