基于JavaScript的模拟键盘Web实现——可用作个人博客主页

一.项目介绍

项目起因：
在淘宝上看见一个卖键盘的视频，当键盘被敲击时，电脑上的按键同样会被点击，特别的炫酷，没错，就是因为帅。我就想着去下来玩玩，但是几乎找遍了所有软件和网站都没找到他们用的是什么。没办法，只能自己动手丰衣足食。
项目实现：
1.跟随键盘点击（被按下的键盘会亮）；
2.英文的打字显示功能（做的时候突发奇想，金山打字通页面风格实在太丑了，用这个打字岂不美哉。），但没有完全实现，打字需要后端的支持，但这只是一个纯前端的项目。
后续一定会做，毕竟谁不想自己的个人博客上有一个可以随时练手装逼的工具呢。

二.成果展示

请添加图片描述

三.源代码

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<style>
			body {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				text-align: center;
				height: 97.5vh;
				-webkit-perspective: 900px;
				perspective: 1000px;
				background: -webkit-linear-gradient(top, #a7a7a7, #5a5a5a);
				background: linear-gradient(to bottom, #a7a7a7, #5a5a5a);
				cursor: crosshair;
			}
			.keys {
				padding-top: 300px;
				-webkit-transform: rotateX(40deg);
				transform: rotateX(40deg);
			}
			.row {
				display: block;
			}
			kbd {
				border-radius: 4px;
				display: inline-block;
				padding: 5px;
				background-color: #222;
				margin: 0.2em;
				font-size: 1.2em;
				width: 30px;
				height: 30px;
				line-height: 35px;
				font-family: avenir;
				box-shadow: 0px 2px 0 rgba(0, 0, 0, 0.5);
				text-transform: uppercase;
				-webkit-transition: 0.1s ease all;
				transition: 0.1s ease all;
				color: rgba(255, 255, 255, 0.5);
			}
			body #keyboard .pressed {
				/*background: white;
				position: relative;
				top: 2px;
				box-shadow: none;*/
				color: yellow;
				-webkit-transform: translateY(2px);
				transform: translateY(2px);
			}
			body #keyboard .operationKey {
				text-transform: none !important;
			}
			body .uppercase {
				text-transform: uppercase;
			}
			body div#text {
				display: flex;
				justify-content: center;
				align-items: center;
				align-content: center;
				flex-wrap: wrap;
				align-items: flex-start;
				width: 20em;
				height: 44vh;
				max-height: 44vh;
				font-size: 3em;
				margin-bottom: 4vh;
				text-align: center;
				overflow: auto;
				align-self: flex-start;
				position: fixed;
				overflow-x:hidden;
				overflow-y:hidden;
			}
			@media (min-width: 768px) {
				body {
					font-size: 10px;
				}
			}
			@media (min-width: 960px) {
				body {
					font-size: 12px;
				}
			}
			@media (min-width: 1080px) {
				body {
					font-size: 14px;
				}
			}
		style>
	head>
	<body>
		<div id="text" >
			<div style="font-family:'黑体';font-size: 60px;"  id="enteredText">
				杜柠函的个人博客
			div>
		div>
		<div class='keys'>
			<div id="keyboard">
				<div class='row'>
					<kbd class="shifter" id="49">1kbd>
					<kbd class="shifter" id="50">2kbd>
					<kbd class="shifter" id="51">3kbd>
					<kbd class="shifter" id="52">4kbd>
					<kbd class="shifter" id="53">5kbd>
					<a>          a>
					<a>          a>
					<kbd class="shifter" id="54">6kbd>
					<kbd class="shifter" id="55">7kbd>
					<kbd class="shifter" id="56">8kbd>
					<kbd class="shifter" id="57">9kbd>
					<kbd class="shifter" id="48">0kbd>
				div>
				<div class='row'>
					<kbd id="81">qkbd>
					<kbd id="87">wkbd>
					<kbd id="69">ekbd>
					<kbd id="82">rkbd>
					<kbd id="84">tkbd>
					<a>          a>
					<a>          a>
					<a>          a>
					<kbd id="89">ykbd>
					<kbd id="85">ukbd>
					<kbd id="73">ikbd>
					<kbd id="79">okbd>
					<kbd id="80">pkbd>
				div>
				<div class='row'>
					<kbd id="65">akbd>
					<kbd id="83">skbd>
					<kbd id="68">dkbd>
					<kbd id="70">fkbd>
					<kbd id="71">gkbd>
					<a>          a>
					<a>          a>
					<a>          a>
					<a>          a>
					<a>          a>
					<kbd id="72">hkbd>
					<kbd id="74">jkbd>
					<kbd id="75">kkbd>
					<kbd id="76">lkbd>
					<kbd class="shifter" id="186">;kbd>
				div>
				<div class='row'>
					<kbd id="90">zkbd>
					<kbd id="88">xkbd>
					<kbd id="67">ckbd>
					<kbd id="86">vkbd>
					<a>          a>
					<a>          a>
					<a>          a>
					<a>          a>
					<a>          a>
					<a>          a>
					<a>          a>
					<a>          a>
					<kbd id="66">bkbd>
					<kbd id="78">nkbd>
					<kbd id="77">mkbd>
					<kbd class="shifter" id="188">,kbd>
				div>
				<div hidden="hidden">
					<kbd class="shifter" id="189">-kbd>
					<kbd class="shifter" id="187">=kbd>
					<kbd class="shifter" id="190">.kbd>
					<kbd class="shifter" id="191">/kbd>
					<kbd class="longer operationKey" id="16">shiftkbd>
					<kbd class="operationKey" id="188">fnkbd>
					<kbd class="operationKey" id="17">ctrlkbd>
					<kbd class="operationKey" id="18">optkbd>
					<kbd class="long operationKey" id="91" >⌘kbd>
					<kbd class="spacebar operationKey" id="32"> kbd>
					<kbd class="long operationKey" id="91">⌘kbd>
					<kbd class="operationKey" id="18">optkbd>
					<kbd class="operationKey" id="17">ctrlkbd>
					<kbd class="operationKey" id="188">fnkbd>
					<kbd class="shifter" id="192">`kbd>
					<kbd class="long operationKey" id="8">delkbd>
					<kbd class="long operationKey" id="9">tabkbd>
					<kbd class="shifter" id="219">[kbd>
					<kbd class="shifter" id="221">]kbd>
					<kbd class="shifter" id="220">\kbd>
					<kbd class="long operationKey" id="20">capskbd>
					<kbd class="shifter" id="222">'kbd>
					<kbd class="long operationKey" id="13">returnkbd>
					<kbd class="longer operationKey" id="16">shiftkbd>
				div>
			div>
		div>
	body>
	<script>script>
	<script>
		let textBox = document.getElementById('enteredText');
		let keyboard = document.getElementById('keyboard');
		let changeKeys = document.getElementsByClassName('shifter');
		let capsLockKey = document.getElementById('20'); //切换大小写
		let shiftKey = document.getElementById('16'); //shift
		//存储非字母键的所有原始值
		var originalShifterArray = [];
		for(i = 0; i < changeKeys.length; i++) {
			originalShifterArray.push(changeKeys[i].innerHTML);
		}
		//为按Shift键时进入的非字母键的替换值设置一个数组
		var shifterArray = ['~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '{', '}', '|', ':', '"', '<', '>', '?'];
		//清除文本框的函数
		function clearText() {
			textBox.innerHTML = '
';
		}
		//Function that detects keypresses and does the appropriate things
		function highlightAndType(e) {
			var keyPressed = e.keyCode; //获取click值的Ascll码
			var charPressed = e.key;  //获取click的值
			const keys = document.getElementById(keyPressed); //根据Ascll码id找到对应的kbd
			keys.classList.add('pressed');//找到的kbd进行点亮
			//如果用户按下了CapsLock或Shift键，将字母键改为大写
			if(charPressed == 'CapsLock' || charPressed == 'Shift') {
				keyboard.classList.add('uppercase');
			}
			//如果用户按下Shift键，还会用shifterArray的值替换所有非字母键
			if(charPressed == 'Shift') {
				for(i = 0; i < changeKeys.length; i++) {
					changeKeys[i].innerHTML = shifterArray[i];
				}
			}
			//确保键入的键是一个字符
			if(e.key.length <= 1) {
				if(textBox.innerHTML.endsWith('
')) {
					var newText = textBox.innerHTML.slice(0, -4);
					textBox.innerHTML = newText;
				}
				textBox.innerHTML += e.key;
				//如果输入了退格，请删除文本框中的最后一个字符。如果按住shift键，删除所有文本。
			} else if(e.key == 'Backspace') {
				if(shiftKey.classList.contains('pressed')) {
					clearText();
				} else {
					var newText = textBox.innerHTML.slice(0, -1);
					textBox.innerHTML = newText;
				}
				//如果键入了Enter键，请从文本框中删除所有文本
			} else if(e.key == 'Enter') {
				textBox.innerHTML = '

';
			}
			//如果按下Tab键，不要将Tab键移出窗口。改为在文本框中添加额外的空间
			if(keyPressed == 9) {
				e.preventDefault();
				textBox.innerHTML += '  ';
			}
		}
		//检测用户何时释放按键并做适当的事情的函数
		function removeKeypress(e) {
			var keyDepressed = e.keyCode;
			const keys = document.getElementById(keyDepressed);
			keys.classList.remove('pressed');//消除点亮
			//如果CapsLock或Shift刚刚被释放，如果另一个还没有打开，返回keys到小写
			if(keyDepressed == 20 && !shiftKey.classList.contains('pressed') || keyDepressed == 16 && !capsLockKey.classList.contains('pressed')) {
				keyboard.classList.remove('uppercase');
			}
			//如果Shift被取消，将所有非字母键替换为它们的原始值，而不是它们移位的值
			if(keyDepressed == 16) {
				for(i = 0; i < changeKeys.length; i++) {
					changeKeys[i].innerHTML = originalShifterArray[i];
				}
			}
		}
		setTimeout("document.getElementById(\"\").focus()",50);
		//每当用户按下一个键时，运行适当的功能
		window.addEventListener('keydown', highlightAndType);
		//每当用户让一个键向上，运行适当的功能
		window.addEventListener('keyup', removeKeypress);
		//每当点击窗口时，运行清除文本框的功能
		window.addEventListener('click', clearText);
	script>
html>
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285

四.结束语

这个项目的后续开发可能会鸽很久，如果更新了会加上GitHub链接。

相关阅读:
whylogs工具库的工业实践！机器学习模型流程与效果监控 ⛵
可能是入门高阶数学的好通道 —— 很直观易记，又很难判断的真假的数学命题们
 Spring Boot 整合邮件服务
 信息学奥赛一本通 1339：【例3-4】求后序遍历 | 洛谷 P1827 [USACO3.4] 美国血统 American Heritage
音视频 HLS协议和m3u8格式分析
 Linux上所有RPM软件包下载地址&&windoes上各种安装包下载地址
 想趁暑假写一个会自动算圆锥曲线的app并且能够显示每个步骤，需要学习哪些只是大概
 NetCore配置详解(2)
基于麻雀搜索算法的PID神经网络解耦控制算法研究附Matlab代码
 用loadrunner监视远程服务器的方法
原文地址：https://blog.csdn.net/gudada010/article/details/126225549