這樣我們先來分析，要實(shí)現(xiàn)鍵盤操作實(shí)現(xiàn)div的移動(dòng)大概的原理吧：

*---要實(shí)現(xiàn)div的移動(dòng)，首先最關(guān)鍵的一點(diǎn)：獲取div對(duì)象

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

*---獲取鍵盤的操作

*---根據(jù)鍵盤的不同操作，給出不同響應(yīng)

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

先是html部分

然后記錄下javascript的實(shí)際操作

就這樣，我們完成了原理分析中的需求，同時(shí)也就可以通過上、下、左、右按鍵來實(shí)現(xiàn)div的上下左右移動(dòng)了，接下來，再來記錄下敏感地方吧。

1、div需是absolute的，為這個(gè)糾結(jié)了半天實(shí)在不值得，于是查詢了下，了解了一個(gè)概念“文檔流”，

文檔流，通常說是元素從上而下，自左向右進(jìn)行排列，那么這個(gè)元素就是節(jié)點(diǎn)元素，龐大的dom啊。還是先來說說其它解釋吧，我比較喜歡的是這樣來闡述：文檔+流，文檔顧名思義就是說網(wǎng)頁(yè)文檔，而流則是輸出方式，還有的解釋說是瀏覽器的解析方式，這個(gè)貌似更形象一點(diǎn)，正常的文檔流，就好像是一個(gè)平面，而一個(gè)元素你把它放在哪了，它就在哪，而浮動(dòng)、固定定位和相對(duì)定位，這里分析absolute，就是重新生成了一個(gè)流，脫離了它的父層標(biāo)簽，就好像之前z-index為0，而這個(gè)的z-index就上了它的上面，憑空懸浮在它上面的，可以通過left、top來肆意的挪動(dòng)它。

大概意思能夠明白了，但是感覺有些地方還是沒法有效的用語(yǔ)言來表述，而且有些點(diǎn)略微有些模糊，相信隨著經(jīng)驗(yàn)的累積，我能理解的更深一些。

2、keyCode這里的大寫，onkeyup和onkeydown這里的小寫，在這個(gè)地方也是測(cè)試了下才發(fā)現(xiàn)的問題，對(duì)于javascript，每個(gè)小地方都是大問題啊；

3、switch里的break；這個(gè)java里面就常碰到，就不多說了

大概的問題就是以上幾點(diǎn)，而你還記得注釋的快捷鍵么，還記得其他快捷鍵么，這就出現(xiàn)了一個(gè)問題，上面做出響應(yīng)的我們只是針對(duì)單個(gè)按鍵，如果我們想用一些快捷鍵呢，該怎么設(shè)置呢？

先來看下代碼：

這里碰到了event對(duì)象的另一個(gè)屬性，是在keyCode之外的另一個(gè)，ctrlKey，還是大寫哦，它的主要功能是檢查ctrl按鍵的狀態(tài)，其實(shí)這樣的還有兩個(gè)：

altKey和shiftKey，分別是對(duì)alt按鍵和shift按鍵狀態(tài)的檢查，這樣知道怎么設(shè)個(gè)快捷鍵了吧。

其實(shí)如果是我自己寫的話，可能這樣我就已經(jīng)很滿足了，但是在翻閱搜索的時(shí)候，總能碰到心思縝密的朋友

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

這里我附上的是網(wǎng)上的代碼在實(shí)現(xiàn)防止溢出的同時(shí)，我還想贊一下這個(gè)寫法，比我寫的果斷的要短了許多許多，以后也要試著寫短點(diǎn)。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com