JavaWeb综合案例-键盘模拟

学完了JavaScript之后，自己突发奇想，想写一个模拟键盘的小程序。代码如下：

程序特色：

按下按键打印对应的keyCode值，并且对应的键会变色，键升起又会恢复颜色。

按下按键语音对应的键名（采用audio标签，这是HTML5的新标签）

<code> </code><code>需求：通过键盘点击，结合键盘事件来模拟按下了哪个键。</code>

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

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

<code> </code><code>1.在onload事件中创建键盘视图</code>

<code> </code><code>2.定义一个输入框来接收和触发键盘事件</code>

<code> </code><code>3.同时返回按下的那个键的keyCode值</code>

<code> </code><code><meta name=</code><code>"Generator"</code> <code>content=</code><code>"EditPlus"</code><code>></code>

<code> </code><code><meta name=</code><code>"Author"</code> <code>content=</code><code>""</code><code>></code>

<code> </code><code><meta name=</code><code>"Keywords"</code> <code>content=</code><code>""</code><code>></code>

<code> </code><code><meta name=</code><code>"Description"</code> <code>content=</code><code>""</code><code>></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>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>display:inline-block;</code>

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

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

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

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

<code> </code><code><marquee behavior=</code><code>"alternate"</code><code>><code>"6"</code> <code>color=</code><code>"BlueViolet"</code> <code>>键盘测试程序&nbsp;&nbsp;&nbsp;作者:陈章&nbsp;&nbsp;&nbsp;黑马程序员【Android70期】</marquee> </code>

<code> </code><code><div id=</code><code>"keycontainer"</code><code>></div></code>

<code> </code><code>请在下面的文本框中按下任意一个键 </code>

<code> </code><code><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>/></code>

<code> </code><code><audio id=</code><code>"soundplayer"</code><code>>您的浏览器不支持audio元素</audio></code>

<code> </code><code><script type=</code><code>"text/javascript"</code><code>></code>

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

<code> </code><code>document.writeln(str);</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>function</code> <code>keydown(e)</code>

<code> </code><code>//遍历键盘的各个键，看哪个的值与键盘按下的值相匹配。</code>

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

<code> </code><code>if</code><code>(each.innerHTML == String.fromCharCode(e.keyCode))</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>playsrc( </code><code>"recordings/UDK.wav"</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>function</code> <code>initView()</code>

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

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

程序在桔子浏览器中运行之后效果如下：

当按下A-Z字母时，会显示字母和对应的keyCode值；其它的键会显示？和keyCode值。

本文转自屠夫章哥 51CTO博客，原文链接：http://blog.51cto.com/4259297/1666096，如需转载请自行联系原作者

JavaWeb综合案例-键盘模拟

继续阅读

一位经验丰富的前端开发人员因未能通过算法面试题而受人嘲笑

前端学习之路---移动web开发（二）

css雪碧图（css sprite）

移动端touch事件和鼠标事件

Angular——模块懒加载

在2016年如何学习JavaScript？

实用css技巧——清除浮动方法总结

css3中的结构伪类选择器

图片下载图片放大

mockjs 的正确使用姿势mockjs fetch的使用思路

css display={block,inline,inline-block}的认识

前端开发日记之window.onload

webstorm中配置git

Vue图片切换过渡设计

测试工程师面试解析～

2018年不想被web前端开发淘汰，你需要掌握哪些技术？