js實作鍵盤操作實作div的移動或改變的原理及程式碼_javascript技巧

昨天記錄了獲取鍵盤按鍵的值的事件，有了值，無非就是針對不同值做不同的操作嘛，而且之前曾經在寫貪吃蛇時也用過。結果一捯鷸，又是好久的一段時間，所以感覺有必要記錄下的，一方面確有可取之處，另一方面也對自己的提醒，剛剛實現過的功能轉頭又是陌生人了，總的來說，算是溫故而知新吧。

這樣我們先來分析，要實現鍵盤操作實現div的移動大概的原理吧：

*---要實現div的移動，首先最關鍵的一點：取得div物件

*---postion：absolute將div完全從文檔流中拖出啊，這個地方漏掉了，回去看了貪吃蛇才發現的，真暈

*---取得鍵盤的操作

*---根據鍵盤的不同操作，給予不同反應

這就是我想起的大概需要注意的地方，還是先來看程式碼：

先是html部分

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

然後記錄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 <=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") 
}

這裡我附上的是網路上的程式碼在實現防止溢出的同時，我還想讚一下這個寫法，比我寫的果斷的要短了許多許多，以後也要試著寫短點。