键盘操作DIV

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了键盘操作DIV相关的知识,希望对你有一定的参考价值。

原作者网址:http://www.jianshu.com/p/c51ccf949734

解决方法


方法 :先开一个定时器,让div一直处于(往4个方向)准备移动的状态

初始4个方向的值都是false,div就保持在原地不动。

按下某个方向键,这个方向的值就改变为true,div就会开始往这个方向移动。

松开方向键,这个方向的值就改变为false , div就停止这个方向移动了。

基本移动,但是有挺顿的代码

 

<html>
<head>
    <title>键盘控制div移动,会有停顿</title>
    <meta charset="utf-8" />
    <style type="text/css">
        #div1{
                width:100px;
                height:100px;
                background:greenyellow;
                position:absolute;}
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            document.onkeydown = function(ev){
                var ev = ev || event;
                var keyCode = ev.keyCode;
                switch(keyCode){
                    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;
                }
            }

        }
    </script>
</head>
<body>
<div id="div1"></div>
</body>
</html

控制移动,解决停顿的问题

 

<html>
<head>
    <title>键盘控制div移动并且解决停顿问题</title>
    <meta charset="utf-8" />
    <style type="text/css">

        /*设置div样式*/
        div{
            width:100px;
            height:100px;
            background: #68affc;
            position:absolute;
            left:100px;
            top:100px;
        }
    </style>
    <script>

        //当页面加载完后
        window.onload = function(){

            //获取Div元素
            var oDiv = document.getElementById("div1");

            //创建各个方向条件判断初始变量
            var left = false;
            var right = false;
            var top = false;
            var bottom = false;

            //当按下对应方向键时,对应变量为true
            document.onkeydown = function(ev){
                var oEvent = ev || event;
                var keyCode = oEvent.keyCode;
                switch(keyCode){
                    case 37:
                        left=true;
                        break;
                    case 38:
                        top=true;
                        break;
                    case 39:
                        right=true;
                        break;
                    case 40:
                        bottom=true;
                        break;
                }
            };

            //设置一个定时,时间为50左右,不要太高也不要太低
            setInterval(function(){

                //当其中一个条件为true时,则执行当前函数(移动对应方向)
                if(left){
                    oDiv.style.left = oDiv.offsetLeft-10+"px";
                }else if(top){
                    oDiv.style.top = oDiv.offsetTop-10+"px";
                }else if(right){
                    oDiv.style.left = oDiv.offsetLeft+10+"px";
                }else if(bottom){
                    oDiv.style.top = oDiv.offsetTop+10+"px";
                }
            },50);

            //执行完后,所有对应变量恢复为false,保持静止不动
            document.onkeyup = function(ev){
                var oEvent = ev || event;
                var keyCode = oEvent.keyCode;

                switch(keyCode){
                    case 37:
                        left=false;
                        break;
                    case 38:
                        top=false;
                        break;
                    case 39:
                        right=false;
                        break;
                    case 40:
                        bottom=false;
                        break;
                }
            }
        }
    </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>


作者:浅吟轻唱
链接:http://www.jianshu.com/p/c51ccf949734
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

以上是关于键盘操作DIV的主要内容,如果未能解决你的问题,请参考以下文章

纯js实现用键盘控制DIV上下左右+放大缩小与变色

从片段导航到另一个片段时隐藏键盘

软输入键盘隐藏编辑文本

vscode中设置vue代码片段

在片段替换上显示/隐藏 Android 软键盘

更改页面javascript代码(TamperMonkey)以将键盘笔触发送到父DOM