JavaWeb综合案例-键盘模拟

最新推荐文章于 2022-12-31 17:27:57 发布

weixin_34008805

最新推荐文章于 2022-12-31 17:27:57 发布

阅读量159

点赞数

文章标签： javascript 移动开发 ViewUI

原文链接：http://blog.51cto.com/4259297/1666096

版权

学完了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 οnlοad="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"  οnkeydοwn="keydown(event);"  οnkeyup="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>

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