当前位置：首页 > 资讯 > 技术文档

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

时间：2021-10-14 08:29 编辑：来源：阅读：
扫一扫，手机访问

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

[b]首先说明下为什么会停顿？[/b] [b]效果：[/b]用键盘控制一个div移动当按下一个方向键不放，div会先停顿一下，然后才开始持续移动。 [b]原因：[/b]系统要区分用户是否连续输入，第一个到第二个之间有一个停顿时间注：了解原因才能解决问题 [b]效果展示[/b] 1.简单控制，但是有停顿 [img]http://files.jb51.net/file_images/article/201612/201612584543456.gif?201611584554[/img] 2.简单控制，解决停顿 [img]http://files.jb51.net/file_images/article/201612/201612584607468.gif?201611584616[/img] [b]解决方法[/b] [b]方法：[/b]先开一个定时器，让div一直处于（往4个方向）准备移动的状态初始4个方向的值都是false，div就保持在原地不动。按下某个方向键，这个方向的值就改变为true，div就会开始往这个方向移动。松开方向键，这个方向的值就改变为false , div就停止这个方向移动了。 [b]基本移动，但是有挺顿的代码[/b]

<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

[b]控制移动，解决停顿的问题 [/b]

<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>

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

全部评论(0)

上一篇：网页中可关闭的漂浮窗口实现可自行调节
下一篇：window.onresize 多次触发的解决方法

资讯排行榜
更多>>