原生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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
javascript RadioButtonList获取选中值
Apr 09 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
vuex state及mapState的基础用法详解
Apr 19 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生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
python处理PHP数组文本文件实例
2014/09/18 Python
Python序列操作之进阶篇
2016/12/08 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
Python partial函数原理及用法解析
2019/12/11 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
SQL面试题
2013/04/30 面试题
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
会计专业自荐信范文
2015/03/05 职场文书
课题研究阶段性总结
2015/08/13 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电