原生js实现键盘控制div移动且解决停顿问题

2019-11-19 18:40:31

字体：大中小

来源：转载

供稿：网友

首先说明下为什么会停顿？

效果：用键盘控制一个div移动

当按下一个方向键不放，div会先停顿一下，然后才开始持续移动。

原因：系统要区分用户是否连续输入，第一个到第二个之间有一个停顿时间
注：了解原因才能解决问题

效果展示

1.简单控制，但是有停顿

2.简单控制，解决停顿

解决方法

方法：先开一个定时器，让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>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的工作或者学习能带来一定的帮助，如果有疑问大家可以留言交流。

上一篇：JS 对java返回的json格式的数据处理方法

下一篇：bootstrap快速制作后台界面