js实现键盘操作对div的移动或改变-------Day43

《爸爸去哪儿》的第二季据说要开播了额，有点小期待，不知道这一季的小宝贝们会有多萌，还会甜到心底吧，
哈哈，还记得那个风一样的女子呢，不知道她现在如何了。

言归正传，继续今天的记录，实际上在刚开始的时候，我以为可以很快的实现这个功能，毕竟昨天记录了获取键盘按键的值的事件，有了值，无非就是针对不同值做不同的操作嘛，而且之前曾经在写贪吃蛇时也用到过。结果一捯饬，又是好久的一段时间，所以感觉有必要记录下的，一方面确有可取之处，另一方面也对自己的提醒，刚刚实现过的功能转头又是陌生人了，总的来说，算是温故而知新吧。

这样我们先来分析，要实现键盘操作实现div的移动大概的原理吧：

*---要实现div的移动，首先最关键的一点：获取div对象

*---postion：absolute将div完全从文档流中拖出啊，这个地方漏掉了，回去看了贪吃蛇才发现的，真晕

*---获取键盘的操作

*---根据键盘的不同操作，给出不同响应

这就是我想起的大概需要注意的地方，还是先来看代码：

先是html部分

    <div style="width: 50px;height: 50px;background-color: cyan;position: absolute;" id="showZone">

然后记录下javascript的实际操作

window.οnlοad=function(){var obj=document.getElementById("showZone");//获取到对象了吧，这最简单var a=10;var toLeft=toRight=toTop=toBottom=false;//定义几个boolean型变量，是为了后面方向操作用的，看是四个方向吧var move=setInterval(function(){//这个地方的move定义实际上毫无意义，只是为了让这个方法更明显一点if(toLeft){obj.style.left=parseInt(obj.offsetLeft-a)+"px";//感觉最好还是写上parseInt，另外，因为offsetLeft是不含px的，所以不要忘记“px” }if(toRight){obj.style.left=obj.offsetLeft+a+"px";//不写parseInt也可以，难道是因为javascript的执行顺序？执行+，再执行+，再执行=？实现结果来看是}if(toTop){obj.style.top=obj.offsetTop-a+"px";}if(toBottom){obj.style.top=obj.offsetTop+a+"px";}},300);  //这个经典的定时器啊，循环执行的大神器，还记得setInterval和settimeout的区别么document.οnkeydοwn=function(event){var event=event||window.event;switch(event.keyCode){  //哈哈，获取到键盘操作了吧case 37:toLeft=true;break;//改变变量，继续执行最初的循环，不让你停不能停啊case 38:toTop=true;break;case 39:toRight=true;break;case 40:toBottom=true;break;}};document.οnkeyup=function(event){switch(event.keyCode){case 37:toLeft=false;break;//给我变回来，让你停就别动了case 38:toTop=false;break;case 39:toRight=false;break;case 40:toBottom=false;break;}};
};

就这样，我们完成了原理分析中的需求，同时也就可以通过上、下、左、右按键来实现div的上下左右移动了，接下来，再来记录下敏感地方吧。

1、div需是absolute的，为这个纠结了半天实在不值得，于是查询了下，了解了一个概念“文档流”，

文档流，通常说是元素从上而下，自左向右进行排列，那么这个元素就是节点元素，庞大的dom啊。还是先来说说其它解释吧，我比较喜欢的是这样来阐述：文档+流，文档顾名思义就是说网页文档，而流则是输出方式，还有的解释说是浏览器的解析方式，这个貌似更形象一点，正常的文档流，就好像是一个平面，而一个元素你把它放在哪了，它就在哪，而浮动、固定定位和相对定位，这里分析absolute，就是重新生成了一个流，脱离了它的父层标签，就好像之前z-index为0，而这个的z-index就上了它的上面，凭空悬浮在它上面的，可以通过left、top来肆意的挪动它。

大概意思能够明白了，但是感觉有些地方还是没法有效的用语言来表述，而且有些点略微有些模糊，相信随着经验的累积，我能理解的更深一些。

2、keyCode这里的大写，onkeyup和onkeydown这里的小写，在这个地方也是测试了下才发现的问题，对于javascript，每个小地方都是大问题啊；

3、switch里的break；这个java里面就常碰到，就不多说了

大概的问题就是以上几点，而你还记得注释的快捷键么，还记得其他快捷键么，这就出现了一个问题，上面做出响应的我们只是针对单个按键，如果我们想用一些快捷键呢，该怎么设置呢？

先来看下代码：

document.οnkeydοwn=function(event){//还是跟上面差不多的代码吧，你看出不同在哪里了么var event=event||window.event;var bctrl=event.ctrlKey;//在这里switch(event.keyCode){case 37:toLeft=true;break;case 38:if(bctrl){obj.style.background="yellow";break;}toTop=true;break;//在这里，case 39:toRight=true;break;case 40:toBottom=true;break;}};

这里碰到了 event对象的另一个属性，是在keyCode之外的另一个， ctrlKey，还是大写哦，它的主要功能是检查ctrl按键的状态，其实这样的还有两个：

altKey和shiftKey，分别是对alt按键和shift按键状态的检查，这样知道怎么设个快捷键了吧。

其实如果是我自己写的话，可能这样我就已经很满足了，但是在翻阅搜索的时候，总能碰到心思缜密的朋友

附上代码，你知道是要做什么么：

 function limit(){var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight]//防止左侧溢出obj.offsetLeft <=0 && (<span style="font-family: Arial, Helvetica, sans-serif;">obj</span><span style="font-family: Arial, Helvetica, sans-serif;">.style.left = 0);</span>//防止顶部溢出obj.offsetTop <=0 && (obj.style.top = 0);//防止右侧溢出doc[0] - obj.offsetLeft - obj.offsetWidth <= 0 && (obj.style.left = doc[0] - obj.offsetWidth + "px");//防止底部溢出doc[1] - obj.offsetTop - obj.offsetHeight <= 0 && (obj.style.top = doc[1] - obj.offsetHeight + "px")}

这里我附上的是网上的代码在实现 防止溢出的同时，我还想赞一下这个写法，比我写的果断的要短了许多许多，以后也要试着写短点。

好了，今天就到这里吧，明天还要去加班，不知道还会不会下雨。来个暖心的，他们俩其实我都喜欢

js实现键盘操作对div的移动或改变-------Day43相关推荐

java键盘控制英雄左右移动_js实现键盘操作实现div的移动或改变的原理及代码
昨天记录了获取键盘按键的值的事件,有了值,无非就是针对不同值做不同的操作嘛,而且之前曾经在写贪吃蛇时也用到过.结果一捯饬,又是好久的一段时间,所以感觉有必要记录下的,一方面确有可取之处,另一方面也对自 ...
js实现键盘控制div移动（可加速）_☆往事随風☆的博客
文章目录前言一.基本思路二.代码分析 1.首先为div开启绝对定位 2.为document绑定键盘按下和抬起事件 3.获取对应键盘的Unicode编码 4.设置变量保存速度和键盘Unicode编 ...
c语言键盘移动解决停顿问题,原生js实现键盘控制div移动且解决停顿问题
首先说明下为什么会停顿? 效果 :用键盘控制一个div移动当按下一个方向键不放,div会先停顿一下,然后才开始持续移动. 原因:系统要区分用户是否连续输入,第一个到第二个之间有一个停顿时间注:了解 ...
js检测键盘组合键，禁止F12
js检测键盘组合键ctrl+p js检测键盘组合键ctrl+d js检测键盘组合键ctrl+s js禁止F12 体验地址:点击在线体验 <!DOCTYPE html> <html l ...
js通过键盘操控盒子
js通过键盘操控盒子步骤 1.键盘按下方向键,可以控制小盒子的移动. 1.1 给谁添加键盘按下事件 document 1.2 如何判断按下的是哪个键键盘事件对象 1.3 如何让小盒子移动让小盒子绝 ...
php光标添加,JS在可编辑的div中的光标位置插入内容的方法_javascript技巧
本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式通过设定contenteditable=t ...
selenium java 滚动条_java+selenium使用JS、键盘滑动滚动条
本篇文章介绍如何使用JS和键盘对象对页面进行滑动滚动条-------------主要针对java做自动化测试的同学一:使用键盘对象操作滚动条 //导包 importorg.openqa.seleni ...
php接收键盘事件,js获取键盘事件的方法实例
本文主要和大家分享js获取键盘事件的方法实例,希望能帮助到大家. document.οnkeydοwn=function(event){ var e = event || window.event | ...
css关闭窗口按钮的代码,JS+CSS实现带关闭按钮DIV弹出窗口的方法
这篇文章主要介绍了JS+CSS实现带关闭按钮DIV弹出窗口的方法,实例分析了div弹出层窗口的实现技巧,非常具有实用价值,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了JS+CSS实现带关 ...

js实现键盘操作对div的移动或改变-------Day43

js实现键盘操作对div的移动或改变-------Day43相关推荐

最新文章

热门文章