键盘控制div移动

_洋

已于 2022-04-08 20:56:34 修改

阅读量659

点赞数

分类专栏： JavaScript 文章标签： js

于 2022-04-08 15:12:38 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/124042151

版权

JavaScript 专栏收录该内容

52 篇文章 7 订阅

订阅专栏

实现滑块的控制移动
按住上下左右使滑块向对应的方向移动。
效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
        #box1{
            height: 100px;
            width: 100px;
            background-color:red;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function(){

            var box1 = document.getElementById("box1");
            document.onkeydown = function(event){  
            event = event || window.event;
            // alert(event.keyCode);
            // 37,38,39,40
            var speed = 10;
            // 按住ctrl键加速
            if(event.ctrlKey){
                speed = 50;
            }
            switch(event.keyCode){
                case 37:
                    // alert("向左");
                    box1.style.left = box1.offsetLeft - speed + "px";
                    break;
                case 39:
                    // alert("向右");
                    box1.style.left = box1.offsetLeft + speed + "px";
                    break;
                case 38:
                    // alert("向上");
                     box1.style.top = box1.offsetTop - speed + "px";
                    break;
                case 40:
                    // alert("向下");
                    box1.style.top = box1.offsetTop + speed + "px";
                    break;
            }

            }
        }

    </script>
</head>
<body>
    <div id="box1">
    </div>
</body>
</html>

问题：为了防止误操作，设计按键时，如果第一个和第二个键按的是同一个键，那么就会产生一个停顿。
这样div在移动的过程中就不是很顺畅。
解决: 一直开启定时器

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
        #box1{
            height: 100px;
            width: 100px;
            background-color:red;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function(){

            var box1 = document.getElementById("box1");
            var speed = 10;
            var div = 0;//方向
            setInterval(function(){
                switch(dir){
                case 37:
                    // alert("向左");
                    box1.style.left = box1.offsetLeft - speed + "px";
                    break;
                case 39:
                    // alert("向右");
                    box1.style.left = box1.offsetLeft + speed + "px";
                    break;
                case 38:
                    // alert("向上");
                     box1.style.top = box1.offsetTop - speed + "px";
                    break;
                case 40:
                    // alert("向下");
                    box1.style.top = box1.offsetTop + speed + "px";
                    break;
            }
            },30);

            document.onkeydown = function(event){  
            event = event || window.event;
            // 按住ctrl键加速
            if(event.ctrlKey){
                speed = 50;
            }else{
                speed =10;
            }
            dir = event.keyCode;
            };

             document.onkeyup = function(){
                 dir = 0;
 
            };
        };

    </script>
</head>
<body>
    <div id="box1">
    </div>
</body>
</html>

_洋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
键盘控制div移动

实现滑块的控制移动按住上下左右使滑块向对应的方向移动。<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <style> #box1{ height: 100px; width: 100px; background-color:red; posi
复制链接

扫一扫

专栏目录