基于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">1</kbd>
<kbd class="shifter" id="50">2</kbd>
<kbd class="shifter" id="51">3</kbd>
<kbd class="shifter" id="52">4</kbd>
<kbd class="shifter" id="53">5</kbd>
<a> </a>
<a> </a>
<kbd class="shifter" id="54">6</kbd>
<kbd class="shifter" id="55">7</kbd>
<kbd class="shifter" id="56">8</kbd>
<kbd class="shifter" id="57">9</kbd>
<kbd class="shifter" id="48">0</kbd>
</div>
<div class='row'>
<kbd id="81">q</kbd>
<kbd id="87">w</kbd>
<kbd id="69">e</kbd>
<kbd id="82">r</kbd>
<kbd id="84">t</kbd>
<a> </a>
<a> </a>
<a> </a>
<kbd id="89">y</kbd>
<kbd id="85">u</kbd>
<kbd id="73">i</kbd>
<kbd id="79">o</kbd>
<kbd id="80">p</kbd>
</div>
<div class='row'>
<kbd id="65">a</kbd>
<kbd id="83">s</kbd>
<kbd id="68">d</kbd>
<kbd id="70">f</kbd>
<kbd id="71">g</kbd>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
<kbd id="72">h</kbd>
<kbd id="74">j</kbd>
<kbd id="75">k</kbd>
<kbd id="76">l</kbd>
<kbd class="shifter" id="186">;</kbd>
</div>
<div class='row'>
<kbd id="90">z</kbd>
<kbd id="88">x</kbd>
<kbd id="67">c</kbd>
<kbd id="86">v</kbd>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
<kbd id="66">b</kbd>
<kbd id="78">n</kbd>
<kbd id="77">m</kbd>
<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">shift</kbd>
<kbd class="operationKey" id="188">fn</kbd>
<kbd class="operationKey" id="17">ctrl</kbd>
<kbd class="operationKey" id="18">opt</kbd>
<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">opt</kbd>
<kbd class="operationKey" id="17">ctrl</kbd>
<kbd class="operationKey" id="188">fn</kbd>
<kbd class="shifter" id="192">`</kbd>
<kbd class="long operationKey" id="8">del</kbd>
<kbd class="long operationKey" id="9">tab</kbd>
<kbd class="shifter" id="219">[</kbd>
<kbd class="shifter" id="221">]</kbd>
<kbd class="shifter" id="220">\</kbd>
<kbd class="long operationKey" id="20">caps</kbd>
<kbd class="shifter" id="222">'</kbd>
<kbd class="long operationKey" id="13">return</kbd>
<kbd class="longer operationKey" id="16">shift</kbd>
</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 = '<br>';
}
//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('<br>')) {
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 = '<br><br>';
}
//如果按下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>
四.结束语
这个项目的后续开发可能会鸽很久，如果更新了会加上GitHub链接。
1101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
