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


Posted in Javascript onDecember 05, 2016

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

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

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

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

效果展示

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

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

2.简单控制,解决停顿

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

解决方法

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

总结

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

Javascript 相关文章推荐
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
js运动动画的八个知识点
Mar 12 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
javascript流程控制语句集合
Sep 18 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 Javascript
vue中template的三种写法示例
Oct 21 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
bootstrap快速制作后台界面
Dec 05 #Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 #Javascript
浅谈js数组和splice的用法
Dec 04 #Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 #Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 #Javascript
jquery select2的使用心得(推荐)
Dec 04 #Javascript
Jquery删除css属性的简单方法
Dec 04 #Javascript
You might like
php at(@)符号的用法简介
2009/07/11 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
vue实现文字加密功能
2019/09/27 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
Python中你应该知道的一些内置函数
2017/03/31 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Django实现分页功能
2018/07/02 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
Servlet方面面试题
2016/09/28 面试题
医学生求职自荐信
2013/10/25 职场文书
销售业务员岗位职责
2014/01/29 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
周一问候语大全
2015/11/10 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android