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月前
|
前端开发 Java 数据库连接
【潜意识Java】深度解读JavaWeb开发在Java学习中的重要性
深度解读JavaWeb开发在Java学习中的重要性
60 4
|
3月前
|
存储 监控 Java
JAVA线程池有哪些队列? 以及它们的适用场景案例
不同的线程池队列有着各自的特点和适用场景,在实际使用线程池时,需要根据具体的业务需求、系统资源状况以及对任务执行顺序、响应时间等方面的要求,合理选择相应的队列来构建线程池,以实现高效的任务处理。
181 12
|
5月前
|
jenkins Java 测试技术
如何使用 Jenkins 自动发布 Java 代码,通过一个电商公司后端服务的实际案例详细说明
本文介绍了如何使用 Jenkins 自动发布 Java 代码,通过一个电商公司后端服务的实际案例,详细说明了从 Jenkins 安装配置到自动构建、测试和部署的全流程。文中还提供了一个 Jenkinsfile 示例,并分享了实践经验,强调了版本控制、自动化测试等关键点的重要性。
162 3
|
5月前
|
存储 Java 关系型数据库
在Java开发中,数据库连接是应用与数据交互的关键环节。本文通过案例分析,深入探讨Java连接池的原理与最佳实践
在Java开发中,数据库连接是应用与数据交互的关键环节。本文通过案例分析,深入探讨Java连接池的原理与最佳实践,包括连接创建、分配、复用和释放等操作,并通过电商应用实例展示了如何选择合适的连接池库(如HikariCP)和配置参数,实现高效、稳定的数据库连接管理。
125 2
|
5月前
|
Java 关系型数据库 数据库
面向对象设计原则在Java中的实现与案例分析
【10月更文挑战第25天】本文通过Java语言的具体实现和案例分析,详细介绍了面向对象设计的五大核心原则:单一职责原则、开闭原则、里氏替换原则、接口隔离原则和依赖倒置原则。这些原则帮助开发者构建更加灵活、可维护和可扩展的系统,不仅适用于Java,也适用于其他面向对象编程语言。
88 2
|
6月前
|
Java 数据库
案例一:去掉数据库某列中的所有英文,利用java正则表达式去做,核心:去掉字符串中的英文
这篇文章介绍了如何使用Java正则表达式从数据库某列中去除所有英文字符。
149 15
|
6月前
|
安全 Java
Java多线程通信新解:本文通过生产者-消费者模型案例,深入解析wait()、notify()、notifyAll()方法的实用技巧
【10月更文挑战第20天】Java多线程通信新解:本文通过生产者-消费者模型案例,深入解析wait()、notify()、notifyAll()方法的实用技巧,包括避免在循环外调用wait()、优先使用notifyAll()、确保线程安全及处理InterruptedException等,帮助读者更好地掌握这些方法的应用。
75 1
|
6月前
|
jenkins Java 测试技术
如何使用 Jenkins 自动发布 Java 代码,通过一个电商公司后端服务的实际案例详细说明
【10月更文挑战第8天】本文介绍了如何使用 Jenkins 自动发布 Java 代码,通过一个电商公司后端服务的实际案例,详细说明了从 Jenkins 安装配置到自动构建、测试和部署的全流程。文中还提供了一个 Jenkinsfile 示例,并分享了实践经验,强调了版本控制、自动化测试等关键点的重要性。
83 5
|
6月前
|
前端开发 Java 应用服务中间件
Javaweb学习
【10月更文挑战第1天】Javaweb学习
58 2
|
6月前
|
分布式计算 NoSQL Java
Hadoop-32 ZooKeeper 分布式锁问题 分布式锁Java实现 附带案例和实现思路代码
Hadoop-32 ZooKeeper 分布式锁问题 分布式锁Java实现 附带案例和实现思路代码
103 2
下一篇
oss创建bucket