键盘移动

maodoudou.

于 2020-11-22 16:47:14 发布

阅读量173

点赞数

分类专栏：原生js 练习demo 文章标签： javascript

本文链接：https://blog.csdn.net/abcd2923/article/details/109957377

版权

原生js 练习demo 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<div style="width: 100px;height: 100px;background-color: brown;opacity: 0.8;position: absolute;top: 0;left: 0;"></div>
    <script type="text/javascript">
        var div = document.getElementsByTagName("div")[0];
        //设置定时器解决转换方向时卡顿的问题
        var speed = 20;
        var dir = 0
        setInterval(function(){
            switch(dir){
                case 37:
                    div.style.left = div.offsetLeft - speed +"px";
                    break;
                case 39:
                    div.style.left = div.offsetLeft + speed + "px";
                    break;
                case 38:
                    div.style.top = div.offsetTop - speed + "px";
                    break;
                case 40:
                    div.style.top = div.offsetTop + speed + "px";
                    break;
            }
        },30);
        document.onkeydown = function(event){
            var event = event || window.event;
            dir = event.keyCode;
            if(event.ctrlKey){
                speed = 50;
            }
        };
        document.onkeyup = function(){
            dir = 0;
            speed = 10;
        }
    </script>