JavaWeb綜合案例-鍵盤模拟

學完了JavaScript之後，自己突發奇想，想寫一個模拟鍵盤的小程式。代碼如下：

程式特色：

按下按鍵列印對應的keyCode值，并且對應的鍵會變色，鍵升起又會恢複顔色。

按下按鍵語音對應的鍵名（采用audio标簽，這是HTML5的新标簽）

<code>&lt;!doctype html&gt;</code>

<code>&lt;html lang=</code><code>"en"</code><code>&gt;</code>

<code> </code><code>&lt;!--</code>

<code> </code><code>需求：通過鍵盤點選，結合鍵盤事件來模拟按下了哪個鍵。</code>

<code>    </code><code>onkeydown</code>

<code> </code><code>onkeyup</code>

<code> </code><code>思路：</code>

<code> </code><code>1.在onload事件中建立鍵盤視圖</code>

<code> </code><code>2.定義一個輸入框來接收和觸發鍵盤事件</code>

<code> </code><code>3.同時傳回按下的那個鍵的keyCode值</code>

<code> </code> 

<code> </code><code>--&gt;</code>

<code> </code><code>&lt;head&gt;</code>

<code>  </code><code>&lt;meta charset=</code><code>"UTF-8"</code><code>&gt;</code>

<code>  </code><code>&lt;meta name=</code><code>"Generator"</code> <code>content=</code><code>"EditPlus"</code><code>&gt;</code>

<code>  </code><code>&lt;meta name=</code><code>"Author"</code> <code>content=</code><code>""</code><code>&gt;</code>

<code>  </code><code>&lt;meta name=</code><code>"Keywords"</code> <code>content=</code><code>""</code><code>&gt;</code>

<code>  </code><code>&lt;meta name=</code><code>"Description"</code> <code>content=</code><code>""</code><code>&gt;</code>

<code>  </code><code>&lt;title&gt;模拟鍵盤&lt;/title&gt;</code>

<code>  </code><code>&lt;style type=</code><code>"text/css"</code><code>&gt;</code>

<code>  </code><code>/*鍵盤外邊框格式*/</code>

<code>  </code><code>#keycontainer{</code>

<code>   </code><code>border:3px solid red;</code>

<code>   </code><code>padding:50px 50px;</code>

<code>  </code><code>}</code>

<code>  </code><code>/*每個按鍵的格式*/</code>

<code>  </code><code>span{</code>

<code>   </code><code>border:1px solid red;</code>

<code>   </code><code>background:black;</code>

<code>   </code><code>width:50px;</code>

<code>   </code><code>color:white;</code>

<code>   </code><code>font-size:1cm;</code>

<code>   </code><code>display:inline-block;</code>

<code>   </code><code>padding:1px;</code>

<code>  </code><code>/*輸入框的格式*/</code>

<code>  </code><code>#input{</code>

<code>  </code><code>&lt;/style&gt;</code>

<code> </code><code>&lt;/head&gt;</code>

<code> </code><code>&lt;body onload=</code><code>"initView();"</code><code>&gt;</code>

<code>  </code><code>&lt;marquee behavior=</code><code>"alternate"</code><code>&gt;&lt;font size=</code><code>"6"</code> <code>color=</code><code>"BlueViolet"</code> <code>&gt;&lt;b&gt;鍵盤測試程式&amp;nbsp;&amp;nbsp;&amp;nbsp;作者:陳章&amp;nbsp;&amp;nbsp;&amp;nbsp;黑馬程式員【Android70期】&lt;/b&gt;&lt;/font&gt;&lt;/marquee&gt; </code>

<code>  </code><code>&lt;div id=</code><code>"keycontainer"</code><code>&gt;&lt;/div&gt;</code>

<code>  </code><code>&lt;hr/&gt;</code>

<code>  </code><code>請在下面的文本框中按下任意一個鍵&lt;br/&gt;</code>

<code>  </code><code>&lt;input type=</code><code>"text"</code> <code>id=</code><code>"input"</code>  <code>onkeydown=</code><code>"keydown(event);"</code>  <code>onkeyup=</code><code>"keyup(event);"</code><code>/&gt;</code>

<code>  </code><code>&lt;!--播放音頻--&gt;</code>

<code>  </code><code>&lt;audio id=</code><code>"soundplayer"</code><code>&gt;您的浏覽器不支援audio元素&lt;/audio&gt;</code>

<code> </code><code>&lt;/body&gt;</code>

<code> </code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

<code> </code><code>//工具函數</code>

<code>  </code><code>function</code> <code>outln(str)</code>

<code> </code><code>{</code>

<code>  </code><code>document.writeln(str);</code>

<code> </code><code>}</code>

<code> </code><code>function</code> <code>out(str)</code>

<code>  </code><code>document.write(str);</code>

<code> </code><code>function</code> <code>byID(id)</code>

<code>  </code><code>return</code> <code>document.getElementById(id);</code>

<code> </code><code>var</code> <code>colorBefore;</code>

<code> </code><code>//擷取音頻播放器</code>

<code> </code><code>var</code> <code>soundplayer = byID(</code><code>"soundplayer"</code><code>);</code>

<code> </code><code>//封裝播放功能</code>

<code> </code><code>function</code> <code>playsrc(src)</code>

<code>  </code><code>soundplayer.src = src ;</code>

<code>  </code><code>soundplayer.play();</code>

<code> </code><code>function</code> <code>byName(name)</code>

<code>  </code><code>return</code> <code>document.getElementsByName(name)[0];</code>

<code>  </code> 

<code>  </code><code>function</code> <code>keydown(e)</code>

<code>  </code><code>{</code>

<code>  </code><code>//周遊鍵盤的各個鍵，看哪個的值與鍵盤按下的值相比對。</code>

<code>   </code><code>var</code> <code>keys = document.getElementsByTagName(</code><code>"span"</code><code>);</code>

<code>   </code><code>for</code><code>(</code><code>var</code> <code>i = 0; i &lt; keys.length; i++)</code>

<code>   </code><code>{</code>

<code>   </code><code>var</code> <code>each = keys[i];</code>

<code>   </code><code>if</code><code>(each.innerHTML == String.fromCharCode(e.keyCode))</code>

<code>    </code><code>{</code>

<code>    </code><code>//播放對應的音頻----這個功能受浏覽器相容性影響，UC/360驗證可使。</code>

<code>    </code><code>playsrc(</code><code>"recordings/"</code> <code>+ String.fromCharCode(e.keyCode) +</code><code>".wav"</code><code>);</code>

<code>    </code><code>colorBefore = each.style.backgroundColor;</code>

<code>    </code><code>each.style.backgroundColor = </code><code>"blue"</code><code>;</code>

<code>    </code><code>return</code><code>;</code>

<code>    </code><code>}</code>

<code>    </code><code>playsrc( </code><code>"recordings/UDK.wav"</code> <code>);</code>

<code>   </code><code>}</code>

<code>  </code><code>function</code> <code>keyup(e){</code>

<code>    </code><code>each.style.backgroundColor = colorBefore;</code>

<code>    </code><code>byID(</code><code>"input"</code><code>).value=String.fromCharCode(e.keyCode) + </code><code>" keyCode值:"</code> <code>+ e.keyCode;</code>

<code>    </code><code>//如果按下的鍵沒有的話</code>

<code>   </code><code>byID(</code><code>"input"</code><code>).value=  </code><code>"? keyCode值:"</code> <code>+ e.keyCode;</code>

<code>  </code><code>// &lt;!--初始化鍵盤視圖--&gt;</code>

<code>  </code><code>function</code> <code>initView()</code>

<code>   </code><code>var</code> <code>main = byID(</code><code>"keycontainer"</code><code>);</code>

<code>   </code><code>var</code> <code>s = </code><code>""</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;Q&lt;/span &gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;W&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;E&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;R&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;T&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;Y&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;U&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;I&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;O&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;P&lt;/span&gt;&amp;nbsp;&amp;nbsp;&lt;br/&gt;&lt;br/&gt;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span &gt;A&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;S&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;D&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;F&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;G&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;H&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;J&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;K&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;L&lt;/span&gt;&amp;nbsp;&amp;nbsp;&lt;br/&gt;&lt;br/&gt;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span &gt;Z&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;X&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;C&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;V&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;B&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;N&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>s += </code><code>"&lt;span &gt;M&lt;/span&gt;&amp;nbsp;&amp;nbsp;"</code><code>;</code>

<code>   </code><code>main.innerHTML = s;</code>

<code>  </code><code>} </code>

<code>   </code> 

<code> </code><code>&lt;/script&gt;</code>

<code>&lt;/html&gt;</code>

程式在桔子浏覽器中運作之後效果如下：

<a href="http://s3.51cto.com/wyfs02/M02/6E/F8/wKioL1WNchnzQtumAAQs_rMWFJE806.jpg" target="_blank"></a>

當按下A-Z字母時，會顯示字母和對應的keyCode值；其它的鍵會顯示？和keyCode值。

      本文轉自屠夫章哥  51CTO部落格，原文連結：http://blog.51cto.com/4259297/1666096，如需轉載請自行聯系原作者