原生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学习笔记之控制页面实现代码
Feb 27 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
小程序图片长按识别功能的实现方法
Aug 30 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
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的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
详解PHP中的PDO类
2015/07/06 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
python求最大值最小值方法总结
2019/06/25 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
Python如何解除一个装饰器
2020/08/07 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
美国家具网站:Cymax
2016/09/17 全球购物
电气自动化自荐信
2013/10/10 职场文书
幼师求职信
2014/06/23 职场文书
求职自我评价范文
2015/03/09 职场文书
研究生导师推荐信
2015/03/25 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
Django 如何实现文件上传下载
2021/04/08 Python