UDN-企业互联网技术人气社区

板块导航

浏览  : 731
回复  : 2

[原生js] 原生js实现键盘控制div移动且解决停顿问题

[复制链接]
牛娜的头像 楼主
发表于 2017-1-8 14:19:27 | 显示全部楼层 |阅读模式
  这篇文章主要给大家介绍了如何利用原生js实现键盘控制div移动,并且解决在移动过程中的停顿问题,文中给出了详细的示例代码,相信对大家的理解和学习很有帮助,下面跟着小编一起来看看吧。



  首先说明下为什么会停顿?

  效果 :用键盘控制一个div移动

  当按下一个方向键不放,div会先停顿一下,然后才开始持续移动。

  原因:系统要区分用户是否连续输入,第一个到第二个之间有一个停顿时间

  注:了解原因才能解决问题

  效果展示

  1.简单控制,但是有停顿
 
201612584543456.gif
 
  2.简单控制,解决停顿
 
201612584607468.gif
 
  解决方法

  方法 :先开一个定时器,让div一直处于(往4个方向)准备移动的状态

  初始4个方向的值都是false,div就保持在原地不动。

  按下某个方向键,这个方向的值就改变为true,div就会开始往这个方向移动。

  松开方向键,这个方向的值就改变为false , div就停止这个方向移动了。

  基本移动,但是有挺顿的代码
  1. <html>
  2. <head>
  3.   <title>键盘控制div移动,会有停顿</title>
  4.   <meta charset="utf-8" />
  5.   <style type="text/css">
  6.     #div1{
  7.         width:100px;
  8.         height:100px;
  9.         background:greenyellow;
  10.         position:absolute;}
  11.   </style>
  12.   <script type="text/JavaScript">
  13.     window.onload = function(){
  14.       var oDiv = document.getElementById("div1");
  15.       document.onkeydown = function(ev){
  16.         var ev = ev || event;
  17.         var keyCode = ev.keyCode;
  18.         switch(keyCode){
  19.           case 37: oDiv.style.left = oDiv.offsetLeft-10+"px";break;
  20.           case 38: oDiv.style.top = oDiv.offsetTop-10+"px";break;
  21.           case 39: oDiv.style.left = oDiv.offsetLeft+10+"px";break;
  22.           case 40: oDiv.style.top = oDiv.offsetTop+10+"px";break;
  23.         }
  24.       }

  25.     }
  26.   </script>
  27. </head>
  28. <body>
  29. <div id="div1"></div>
  30. </body>
  31. </html
复制代码
  
  控制移动,解决停顿的问题
 
  1. <html>
  2. <head>
  3.   <title>键盘控制div移动并且解决停顿问题</title>
  4.   <meta charset="utf-8" />
  5.   <style type="text/css">

  6.     /*设置div样式*/
  7.     div{
  8.       width:100px;
  9.       height:100px;
  10.       background: #68affc;
  11.       position:absolute;
  12.       left:100px;
  13.       top:100px;
  14.     }
  15.   </style>
  16.   <script>

  17.     //当页面加载完后
  18.     window.onload = function(){

  19.       //获取Div元素
  20.       var oDiv = document.getElementById("div1");

  21.       //创建各个方向条件判断初始变量
  22.       var left = false;
  23.       var right = false;
  24.       var top = false;
  25.       var bottom = false;

  26.       //当按下对应方向键时,对应变量为true
  27.       document.onkeydown = function(ev){
  28.         var oEvent = ev || event;
  29.         var keyCode = oEvent.keyCode;
  30.         switch(keyCode){
  31.           case 37:
  32.             left=true;
  33.             break;
  34.           case 38:
  35.             top=true;
  36.             break;
  37.           case 39:
  38.             right=true;
  39.             break;
  40.           case 40:
  41.             bottom=true;
  42.             break;
  43.         }
  44.       };

  45.       //设置一个定时,时间为50左右,不要太高也不要太低
  46.       setInterval(function(){

  47.         //当其中一个条件为true时,则执行当前函数(移动对应方向)
  48.         if(left){
  49.           oDiv.style.left = oDiv.offsetLeft-10+"px";
  50.         }else if(top){
  51.           oDiv.style.top = oDiv.offsetTop-10+"px";
  52.         }else if(right){
  53.           oDiv.style.left = oDiv.offsetLeft+10+"px";
  54.         }else if(bottom){
  55.           oDiv.style.top = oDiv.offsetTop+10+"px";
  56.         }
  57.       },50);

  58.       //执行完后,所有对应变量恢复为false,保持静止不动
  59.       document.onkeyup = function(ev){
  60.         var oEvent = ev || event;
  61.         var keyCode = oEvent.keyCode;

  62.         switch(keyCode){
  63.           case 37:
  64.             left=false;
  65.             break;
  66.           case 38:
  67.             top=false;
  68.             break;
  69.           case 39:
  70.             right=false;
  71.             break;
  72.           case 40:
  73.             bottom=false;
  74.             break;
  75.         }
  76.       }
  77.     }
  78.   </script>
  79. </head>
  80. <body>
  81. <div id="div1"></div>
  82. </body>
  83. </html>
复制代码


  总结

  以上就是这篇文章的全部内容了,希望本文的内容对大家的工作或者学习能带来一定的帮助,如果有疑问大家可以留言交流。

相关帖子

发表于 2017-1-8 14:19:58 来自手机 | 显示全部楼层
Very Good!
使用道具 举报

回复

发表于 2017-1-10 23:54:12 | 显示全部楼层
总觉得哪里有点问题啊
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部