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

程序特色：

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

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

     
       
         
      
         
       
          
        
           
         
            
          
             
             
           
              /*键盘外边框格式*/  #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;  }    
            
               
             
              
               键盘测试程序   作者:陈章   黑马程序员【Android70期】   
               
                  
                
  请在下面的文本框中按下任意一个键
                
  
                  
                  
                
                 您的浏览器不支持audio元素  
                 
                   //工具函数  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 += "
                  
                   Q
                    ";   s += "
                  
                   W  ";   s += "
                   
                    E  ";   s += "
                    
                     R  ";   s += "
                     
                      T  ";   s += "
                      
                       Y  ";   s += "
                       
                        U  ";   s += "
                        
                         I  ";   s += "
                         
                          O  ";   s += "
                          
                           P  
                           
                           
";   s += "      
                           
                            A  ";   s += "
                            
                             S  ";   s += "
                             
                              D  ";   s += "
                              
                               F  ";   s += "
                               
                                G  ";   s += "
                                
                                 H  ";   s += "
                                 
                                  J  ";   s += "
                                  
                                   K  ";   s += "
                                   
                                    L  
                                    
                                    
";   s += "            
                                    
                                     Z  ";   s += "
                                     
                                      X  ";   s += "
                                      
                                       C  ";   s += "
                                       
                                        V  ";   s += "
                                        
                                         B  ";   s += "
                                         
                                          N  ";   s += "
                                          
                                           M  ";   main.innerHTML = s;  }     
                                          
                                         
                                        
                                       
                                      
                                     
                                    
                                   
                                  
                                 
                                
                               
                              
                             
                            
                           
                          
                         
                        
                       
                      
                     
                    
                   
                  
                 
                
               
              
             
            
           
          
         
        
       
      
     

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

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