js实现键盘操作实现div的移动或改变的原理及代码_javascript技巧
这样我们先来分析，要实现键盘操作实现div的移动大概的原理吧：
*---要实现div的移动，首先最关键的一点：获取div对象
*---postion：absolute将div完全从文档流中拖出啊，这个地方漏掉了，回去看了贪吃蛇才发现的，真晕
*---获取键盘的操作
*---根据键盘的不同操作，给出不同响应
这就是我想起的大概需要注意的地方，还是先来看代码：
先是html部分
然后记录下javascript的实际操作window.onload=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.onkeydown=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.onkeyup=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.onkeydown=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 obj.style.left = 0); //防止顶部溢出 obj.offsetTop这里我附上的是网上的代码在实现防止溢出的同时，我还想赞一下这个写法，比我写的果断的要短了许多许多，以后也要试着写短点。
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频
- javascript怎么将值类型强制转为字符串
- javascript中什么是位运算符
- 总结分享： 6 种JavaScript的打断点的方...
- javascript怎么判断字符串是否是数字
- js实现键盘操作实现div的移动或改变的原理及代码...