原生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 相关文章推荐
JavaScript中this关键字使用方法详解
Mar 08 Javascript
input 高级限制级用法
Mar 26 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
jQuery事件详解
Feb 23 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
Vue实现可移动水平时间轴
Jun 29 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之第五天
2006/10/09 PHP
聊天室php&amp;mysql(二)
2006/10/09 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
php include和require的区别深入解析
2013/06/17 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
Series和DataFrame使用简单入门
2019/11/13 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
美发店5.1活动方案
2014/01/24 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
刑事辩护词范文
2015/05/21 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书