原生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 相关文章推荐
[JS源码]超长文章自动分页(客户端版)
Jan 09 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
js的回调函数详解
Jan 05 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
js图片切换具体实现代码
Oct 13 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 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面向对象的使用教程 简单数据库连接
2006/11/25 PHP
PHP静态新闻列表自动生成代码
2007/06/14 PHP
php 生成饼图 三维饼图
2009/09/28 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
JavaScript File分段上传
2016/03/10 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
linux环境下Django的安装配置详解
2019/07/22 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
应届生求职自荐信
2014/07/04 职场文书
个人创业事迹材料
2014/12/30 职场文书
医生个人年度总结
2015/02/28 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
诚实守信主题班会
2015/08/13 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB