定时器的应用之按键移动控制卡顿问题

最新推荐文章于 2022-10-27 13:49:00 发布

彻无蔚

最新推荐文章于 2022-10-27 13:49:00 发布

阅读量326

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44019720/article/details/108979632

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

上下左右按键事件

在按下键盘上下左右键时，能使div对应移动，不用定时器时会出现开始的卡顿情况，为了解决这个问题，加入定时器来控制div的移动速度。

在这里<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
    <style>
        #box1{
            width:100px;
            height:100px;
            background-color:pink;
            position:absolute;

        }
    </style>
    <script>
        window.onload = function(){
            /*
            按下键盘中的上下左右键移动div元素的对象

            */
            var speed = 10;
            var dir = 0;
            /*设置一个定时器来控制div移动速度 
            当键盘按下一直不放手时，div会按照定时器设置的时间间隔进行移动
            而速度的作用是在执行的时候移动相应的位置
            
             */
            setInterval(function(){
                //alert(event.keyCode);
                switch(dir){
                    case 37://向左,left值减小
                        box1.style.left = box1.offsetLeft - speed + 'px';
                        break;

                    case 38://向上，top值减小
                        box1.style.top = box1.offsetTop - speed + 'px';
                        break;

                    case 39://向右，left值增加
                        box1.style.left = box1.offsetLeft + speed + 'px';
                        break;

                    case 40://向下，top值增加
                        box1.style.top= box1.offsetTop + speed + 'px';
                        break;
                }
            },100);

            var box1 = document.getElementById('box1');
            document.onkeydown = function(event){
                event = event || window.event;

                //当用户按了ctrl以后，速度加快
                if(event.ctrlKey){
                    speed = 50;
                }else{
                    speed = 10;
                }

                //使dir等于按键的值
                dir = event.keyCode;
            };

            //按键松开时，div不在移动
            document.onkeyup = function(){
                //设置方向为0
                dir = 0;
            };
        };
    </script>
</head>
<body>
    <div id='box1'></div>
</body>
</html>插入代码片

彻无蔚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定时器的应用之按键移动控制卡顿问题

上下左右按键事件在按下键盘上下左右键时，能使div对应移动，不用定时器时会出现开始的卡顿情况，为了解决这个问题，加入定时器来控制div的移动速度。在这里<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
复制链接

扫一扫