JavaWeb综合案例-键盘模拟

简介:
+关注继续查看

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

程序特色:

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

  2. 按下按键语音对应的键名(采用audio标签,这是HTML5的新标签)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!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>

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

wKioL1WNchnzQtumAAQs_rMWFJE806.jpg

当按下A-Z字母时,会显示字母和对应的keyCode值;其它的键会显示?和keyCode值。


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








相关文章
|
3月前
一个案例带你了解独立式键盘设计原理
一个案例带你了解独立式键盘设计原理
61 0
|
7月前
游戏辅助 -- 获取人物属性代码编写
游戏辅助 -- 获取人物属性代码编写
51 0
游戏辅助 -- 获取人物属性代码编写
|
7月前
课外拓展1.模拟计算器的三种方法
回调函数的参数就是一个函数指针,这个指针便可以接收函数了,因为指针并没有指向,所以这个指针可以接收任意一个函数、
40 0
|
10月前
|
开发框架 小程序 JavaScript
挑战新形式,小程序之手势解锁登录功能教程【附完整代码及思路】
挑战新形式,小程序之手势解锁登录功能教程【附完整代码及思路】
147 0
挑战新形式,小程序之手势解锁登录功能教程【附完整代码及思路】
|
Java
编写Java程序,几个朋友到游乐场游玩,大家投票选择出行方式。使用程序来模拟这一结果。(工厂模式示例Demo)
编写Java程序,几个朋友到游乐场游玩,大家投票选择出行方式。使用程序来模拟这一结果。(工厂模式示例Demo)
112 0
编写Java程序,几个朋友到游乐场游玩,大家投票选择出行方式。使用程序来模拟这一结果。(工厂模式示例Demo)
|
物联网 数据可视化 API
Thingjs 开门示例:以3D机柜为例 演示thingjs如何开门
动画的播放和暂停是3D场景中常用的功能,本文以机柜为例为您讲解在thingjs中使用playAnimation(params)接口控制机柜门开启和关闭,同理,房门开关、电器运行停止等3D模型的动画启停均可以使用此方法。
2073 0
|
Web App开发 缓存 前端开发
前端性能优化:客户端从输入到展示讲解
性能优化的根本目的:  要思考的是用户使用网站的体验如何,而不是我们可以节省多少字节,只有准确感知用户的感受,我们才有必要谈毫秒、字节和请求数量等问题。 针对优化注意事项: 防止过早优化:没必要在刚开始阶段就对一个细节进行放大型的优化,因为这样的成本很高,除了代码可读性方面的东西,甚至还可能会引入更多的bug,所以,针对这个问题,我们可以在上线和运营的时候进行监控,当快暴露到问题的时候,进行整体优化。
1333 0
相关产品
云迁移中心
推荐文章
更多