事件：方向键的应用

最新推荐文章于 2021-08-20 16:41:14 发布

jerny2017

最新推荐文章于 2021-08-20 16:41:14 发布

阅读量136

点赞数

分类专栏： JAVASCRIPT

本文链接：https://blog.csdn.net/jerny2017/article/details/80279779

版权

JAVASCRIPT 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

键盘控制Div移动
方向键控制方向

定时器控制移动和速度

<div id="div1">

#div1{width:100px;height:100px;background: red;position: absolute;left:40%;top:30%;}

       onload = function () {
            var oDiv = document.getElementById('div1');
            oDiv.timer = null;
            var direct = 0;

            document.onkeydown = function(ev) {
                ev = ev || event;
                direct = ev.keyCode;
                if(oDiv.timer == null){
                    oDiv.timer = setInterval(doMove,50);
                }
            };
            document.onkeyup = function () {
                clearInterval(oDiv.timer);
                oDiv.timer = null;
            };

            function doMove() {
                switch (direct) {
                    case 37:
                        oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
                        break;
                    case 38:
                        oDiv.style.top = oDiv.offsetTop - 10 + 'px';
                        break;
                    case 39:
                        oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
                        break;
                    case 40:
                        oDiv.style.top = oDiv.offsetTop + 10 + 'px';
                        break;
                    default:
                        return;
                }
            }
        };