JavaWeb综合案例-键盘模拟-阿里云开发者社区

JavaWeb综合案例-键盘模拟

2017-11-03 1161

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

+关注继续查看

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

程序特色：

按下按键打印对应的keyCode值，并且对应的键会变色，键升起又会恢复颜色。
按下按键语音对应的键名（采用audio标签，这是HTML5的新标签）

<!doctype html>

<html lang="en">

 <!--

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

    onkeydown

 onkeyup

 思路：

 1.在onload事件中创建键盘视图

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

 3.同时返回按下的那个键的keyCode值

 -->

 <head>

  <meta charset="UTF-8">

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

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

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

  <meta name="Description" content="">

  <title>模拟键盘</title>

  <style type="text/css">

  /*键盘外边框格式*/

  #keycontainer{

   border:3px solid red;

   padding:50px 50px;

  }

  /*每个按键的格式*/

  span{

   border:1px solid red;

   background:black;

   width:50px;

   color:white;

   font-size:1cm;

   display:inline-block;

   padding:1px;

  }

  /*输入框的格式*/

  #input{

   border:1px solid red;

  }

  </style>

 </head>

 <body onload="initView();">

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

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

  <hr/>

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

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

  <!--播放音频-->

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

 </body>

 <script type="text/javascript">

 //工具函数

  function outln(str)

 {

  document.writeln(str);

 }

 function out(str)

 {

  document.write(str);

 }

 function byID(id)

 {

  return document.getElementById(id);

 }

 var colorBefore;

 //获取音频播放器

 var soundplayer = byID("soundplayer");

 //封装播放功能

 function playsrc(src)

 {

  soundplayer.src = src ;

  soundplayer.play();

 }

 function byName(name)

 {

  return document.getElementsByName(name)[0];

 }

  function keydown(e)

  {

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

   var keys = document.getElementsByTagName("span");

   for(var i = 0; i < keys.length; i++)

   {

   var each = keys[i];

   if(each.innerHTML == String.fromCharCode(e.keyCode))

    {

    //播放对应的音频----这个功能受浏览器兼容性影响，UC/360验证可使。

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

    colorBefore = each.style.backgroundColor;

    each.style.backgroundColor = "blue";

    return;

    }

    playsrc( "recordings/UDK.wav" );

   }

  }
 
  function keyup(e){

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

   var keys = document.getElementsByTagName("span");

   for(var i = 0; i < keys.length; i++)

   {

   var each = keys[i];

   if(each.innerHTML == String.fromCharCode(e.keyCode))

    {

    each.style.backgroundColor = colorBefore;

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

    return;

    }

    //如果按下的键没有的话

   byID("input").value=  "? keyCode值:" + e.keyCode;

   }

  }

  // <!--初始化键盘视图-->

  function initView()

  {

   var main = byID("keycontainer");

   var s = "";

   s += "<span >Q</span >&nbsp;&nbsp;";

   s += "<span >W</span>&nbsp;&nbsp;";

   s += "<span >E</span>&nbsp;&nbsp;";

   s += "<span >R</span>&nbsp;&nbsp;";

   s += "<span >T</span>&nbsp;&nbsp;";

   s += "<span >Y</span>&nbsp;&nbsp;";

   s += "<span >U</span>&nbsp;&nbsp;";

   s += "<span >I</span>&nbsp;&nbsp;";

   s += "<span >O</span>&nbsp;&nbsp;";

   s += "<span >P</span>&nbsp;&nbsp;<br/><br/>";

   s += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span >A</span>&nbsp;&nbsp;";

   s += "<span >S</span>&nbsp;&nbsp;";

   s += "<span >D</span>&nbsp;&nbsp;";

   s += "<span >F</span>&nbsp;&nbsp;";

   s += "<span >G</span>&nbsp;&nbsp;";

   s += "<span >H</span>&nbsp;&nbsp;";

   s += "<span >J</span>&nbsp;&nbsp;";

   s += "<span >K</span>&nbsp;&nbsp;";

   s += "<span >L</span>&nbsp;&nbsp;<br/><br/>";

   s += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span >Z</span>&nbsp;&nbsp;";

   s += "<span >X</span>&nbsp;&nbsp;";

   s += "<span >C</span>&nbsp;&nbsp;";

   s += "<span >V</span>&nbsp;&nbsp;";

   s += "<span >B</span>&nbsp;&nbsp;";

   s += "<span >N</span>&nbsp;&nbsp;";

   s += "<span >M</span>&nbsp;&nbsp;";

   main.innerHTML = s;

  } 

 </script>
</html>

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

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

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