原生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设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
解决vue-router中的query动态传参问题
Mar 20 Javascript
vue3不同环境下实现配置代理
May 25 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python实现每次处理一个字符的三种方法
2014/10/09 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
Python 项目转化为so文件实例
2019/12/23 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
pygame实现飞机大战
2020/03/11 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
求职面试个人自我评价
2014/02/28 职场文书
小学同学聚会感言
2015/07/30 职场文书
老兵退伍感言
2015/08/03 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS