闲来无事，用HTML+CSS+JS打造一个84键机械键盘模拟器
今天闲来无聊，突发奇想要用前端技术模拟一个机械键盘。说干就干，花了点时间搞出来了这么一个有模有样的84键机械键盘模拟器。来看看效果吧！
升级版的模拟器
屏幕录制 2025-04-18 155308
是不是挺像那么回事的？哈哈！
它来源于我的实体键盘：
有需要自取哈别忘了点个赞！
代码：
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>84键机械键盘精确复刻</title><style>body {background: #f5f5f5;display: flex;justify-content: center;padding: 20px;font-family: 'Segoe UI', sans-serif;}.keyboard {display: grid;grid-template-columns: repeat(16, 42px);gap: 3px;background: #333;padding: 15px;border-radius: 8px;box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}.key {background: #222;color: white;border: 1px solid #444;border-radius: 4px;padding: 6px;min-height: 42px;display: flex;flex-direction: column;justify-content: center;text-align: center;font-size: 12px;line-height: 1.3;cursor: pointer;transition: all 0.1s ease;user-select: none;}.arrow {font-size: 22px}/* 特殊键位跨度 */.span2 {grid-column: span 2;}.span3 {grid-column: span 3;}.span4 {grid-column: span 4;}.span5 {grid-column: span 5;}/* 颜色系统 */.esc {background: #00ffff;color: #000;}.enter {background: #ffa500;}.space {background: #0066cc;}.special {background: #444;}/* 复合字符 */.sub-char {font-size: 9px;color: #aaa;line-height: 1.1;margin-top: 2px;}/* 按压效果 */.key:active {transform: translateY(2px);background: #2a2a2a;box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);}.key.pressed {transform: translateY(2px);background: #2a2a2a;box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);}</style>
</head>
<body>
<div class="keyboard"><!-- 第1行 --><div class="key esc" data-key="Escape">ESC</div><div class="key" data-key="F1">F1</div><div class="key" data-key="F2">F2</div><div class="key" data-key="F3">F3</div><div class="key" data-key="F4">F4</div><div class="key" data-key="F5">F5</div><div class="key" data-key="F6">F6</div><div class="key" data-key="F7">F7</div><div class="key" data-key="F8">F8</div><div class="key" data-key="F9">F9</div><div class="key" data-key="F10">F10</div><div class="key" data-key="F11">F11</div><div class="key" data-key="F12">F12</div><div class="key" data-key="PrintScreen">PrtSc</div><div class="key" data-key="Insert">Ins</div><div class="key" data-key="Home">Home</div><!-- 第2行 --><div class="key" data-key="`">~<br><span class="sub-char">`</span></div><div class="key" data-key="1">!<br><span class="sub-char">1</span></div><div class="key" data-key="2">@<br><span class="sub-char">2</span></div><div class="key" data-key="3">#<br><span class="sub-char">3</span></div><div class="key" data-key="4">$<br><span class="sub-char">4</span></div><div class="key" data-key="5">%<br><span class="sub-char">5</span></div><div class="key" data-key="6">^<br><span class="sub-char">6</span></div><div class="key" data-key="7">&<br><span class="sub-char">7</span></div><div class="key" data-key="8">*<br><span class="sub-char">8</span></div><div class="key" data-key="9">(<br><span class="sub-char">9</span></div><div class="key" data-key="0">)<br><span class="sub-char">0</span></div><div class="key span4" data-key="Backspace">⇐Back</div><div class="key" data-key="Delete">Del</div><!-- 第3行 --><div class="key span2" data-key="Tab">Tab↹</div><div class="key" data-key="q">Q</div><div class="key" data-key="w">W</div><div class="key" data-key="e">E</div><div class="key" data-key="r">R</div><div class="key" data-key="t">T</div><div class="key" data-key="y">Y</div><div class="key" data-key="u">U</div><div class="key" data-key="i">I</div><div class="key" data-key="o">O</div><div class="key" data-key="p">P</div><div class="key" data-key="[">{<br><span class="sub-char">[</span></div><div class="key" data-key="]">}<br><span class="sub-char">]</span></div><div class="key" data-key="\">|<br><span class="sub-char">\</span></div><div class="key" data-key="PageUp">PgUp</div><!-- 第4行 --><div class="key" data-key="CapsLock">Caps</div><div class="key" data-key="a">A</div><div class="key" data-key="s">S</div><div class="key" data-key="d">D</div><div class="key" data-key="f">F</div><div class="key" data-key="g">G</div><div class="key" data-key="h">H</div><div class="key" data-key="j">J</div><div class="key" data-key="k">K</div><div class="key" data-key="l">L</div><div class="key" data-key=";">:<br><span class="sub-char">;</span></div><div class="key" data-key="'">"<br><span class="sub-char">'</span></div><div class="key enter span3" data-key="Enter">Enter</div><div class="key" data-key="PageDown">PgDn</div><!-- 第5行 --><div class="key span2" data-key="ShiftLeft">⇧Shift</div><div class="key" data-key="z">Z</div><div class="key" data-key="x">X</div><div class="key" data-key="c">C</div><div class="key" data-key="v">V</div><div class="key" data-key="b">B</div><div class="key" data-key="n">N</div><div class="key" data-key="m">M</div><div class="key" data-key=","><<br><span class="sub-char">,</span></div><div class="key" data-key=".">><br><span class="sub-char">.</span></div><div class="key" data-key="/">?<br><span class="sub-char">/</span></div><div class="key span2" data-key="ShiftRight">⇧Shift</div><div class="key arrow" data-key="ArrowUp">△</div><div class="key" data-key="End">End</div><!-- 第6行 --><div class="key span2" data-key="ControlLeft">Ctrl<br><span class="sub-char">Control</span></div><div class="key" data-key="MetaLeft">Win<br><span class="sub-char">Option</span></div><div class="key span2" data-key="AltLeft">Alt<br><span class="sub-char">Cmd</span></div><div class="key space span5" data-key=" ">Space</div><div class="key" data-key="AltRight">Alt<br><span class="sub-char">Cmd</span></div><div class="key" data-key="Fn">Fn</div><div class="key" data-key="ControlRight">Ctrl<br><span class="sub-char">Control</span></div><div class="key" data-key="ArrowLeft">◁</div><div class="key arrow" data-key="ArrowDown">▽</div><div class="key" data-key="ArrowRight">▷</div>
</div><script>document.addEventListener('keydown', function(event) {const key = event.key.toLowerCase();const keyElement = document.querySelector(`.key:not(.span2):not(.span3):not(.span4):not(.span5):not(.arrow):not(.special)[data-key="${key}"]`);if (keyElement) {keyElement.classList.add('pressed');}});document.addEventListener('keyup', function(event) {const key = event.key.toLowerCase();const keyElement = document.querySelector(`.key:not(.span2):not(.span3):not(.span4):not(.span5):not(.arrow):not(.special)[data-key="${key}"]`);if (keyElement) {keyElement.classList.remove('pressed');}});
</script>
</body>
</html>
相关文章：
闲来无事，用HTML+CSS+JS打造一个84键机械键盘模拟器
今天闲来无聊，突发奇想要用前端技术模拟一个机械键盘。说干就干，花了点时间搞出来了这么一个有模有样的84键机械键盘模拟器。来看看效果吧！ 升级版的模拟器 屏幕录制 2025-04-18 155308 是不是挺像那么回事的？哈哈！ 它…...
23种设计模式全面解析
设计模式是解决软件设计中常见问题的经典方案。根据《设计模式：可复用面向对象软件的基础》（GoF），23种设计模式分为以下三类： 一、创建型模式（5种） 目标：解耦对象的创建过程&#x…...
Java学习手册：常见并发问题及解决方案
在Java并发编程中，开发者常常会遇到各种并发问题，这些问题可能导致程序行为不可预测、性能下降甚至程序崩溃。以下是一些常见的并发问题及其解决方案： 1.竞态条件（Race Condition） 竞态条件是指多个线程同时访问共享…...
【免费下载】中国各省市地图PPT，可编辑改颜色
很多同学做PPT时，涉及到中国地图或省份展示，自己绘制和调色难度大，下面为大家准备了中国地图的可编辑模板，可以根据PPT整体色或想突出的省份，直接调整颜色。 需要这份数据，请在文末查看下载方法。 一、数…...
Linux 系统编程 day4 进程管道
进程间通信（IPC） Linux环境下，进程地址空间相互独立，任何一个进程的全局变量在另一个进程中都看不到，所以进程和进程之间不能互相访问，要交换数据必须通过内核，在内核中开辟一块缓冲区…...
【Reading Notes】（8.2）Favorite Articles from 2025 February
【February】 高阶智驾别被短期市占率迷住眼！（2025年02月01日） 2024年，高阶智驾发展迅猛，粗略计算中国市场（特斯拉之外）的城市NOA车型的年度搭载量超过了100万台。但相比于中国乘用车市场2000万…...
探索大语言模型（LLM）：循环神经网络的深度解析与实战（RNN、LSTM 与 GRU）
一、循环神经网络（RNN） 1.1 基本原理 循环神经网络之所以得名，是因为它在处理序列数据时，隐藏层的节点之间存在循环连接。这意味着网络能够记住之前时间步的信息，并利用这些信息来处理当前的输入。 想象一下…...
山东大学软件学院创新项目实训开发日志（15）之中医知识问答历史对话查看bug处理后端信息响应成功但前端未获取到
在开发中医知识问答历史对话查看功能的时候，出现了前后端信息获取异同的问题，在经过非常非常非常艰难的查询之后终于解决了这一问题，而这一问题的罪魁祸首就是后端没有setter和getter方法！！！！&a…...
poj1067 取石子游戏 威佐夫博弈
题目 有两堆石子，数量任意，可以不同。游戏开始由两个人轮流取石子。游戏规定，每次有两种不同的取法， 一是可以在任意的一堆中取走任意多的石子；二是可以在两堆中同时取走相同数量的石子。最后把石子全部取完者为胜者…...
优先级队列的实模拟实现
优先级队列底层默认用的是vector来存储数据，实现了类似我们数据结构中学习过的堆的队列，他的插入和删除都是优先级高先插入和删除。下面我们来模拟实现它们常见的接口来熟悉优先级队列。 仿函数 在介绍优先级队列之前，我们先熟悉一个概念&a…...
中国高校光芯片技术进展：前沿突破与产业化路径分析——基于材料、集成与系统协同创新的视角
引言：光电子技术的范式变革 随着摩尔定律逼近物理极限，光芯片技术成为突破电子芯片性能瓶颈的核心路径。光芯片以光子为载体，在传输速率（>100 Gbps）、能耗效率（<1 pJ/bit）及抗电磁干扰等…...
swagger 导入到apipost中
打开swagger json链接 保存到本地转为json格式文件 上传文件就行...
网安加·百家讲坛 | 刘志诚：AI安全风险与未来展望
作者简介：刘志诚，乐信集团信息安全中心总监、OWASP广东区域负责人、网安加社区特聘专家。专注于企业数字化过程中网络空间安全风险治理，对大数据、人工智能、区块链等新技术在金融风险治理领域的应用，以及新技术带来的技术风险治理…...
熵权法+TOPSIS+灰色关联度综合算法（Matlab实现）
熵权法TOPSIS灰色关联度综合算法（Matlab实现） 代码获取私信回复：熵权法TOPSIS灰色关联度综合算法（Matlab实现） 摘要： 熵权法TOPSIS灰色关联度综合算法（Matlab实现）代码实现了一种…...
React 中如何获取 DOM：用 useRef 操作非受控组件
📌 场景说明 在写 React 的时候，通常我们是通过“受控组件”来管理表单元素，比如用 useState 控制 <input> 的值。 但有些时候，控制的需求只是临时性的，或者完全不需要重新渲染组件，这时候直接访问…...
YAFFS2 的页缓存机制原理及配置优化方法详解
YAFFS2（Yet Another Flash File System 2）通过其独特的 页缓存机制 和 日志结构设计 优化了 NAND 闪存的读写性能与寿命。以下是其页缓存实现的核心机制及关键流程： 一、YAFFS2 页缓存架构 1. 缓存结构 YAFFS2 的页缓存基于 动态缓存池 设计…...
神经接口安全攻防：从技术漏洞到伦理挑战
随着脑机接口（BCI）技术的快速发展，神经接口设备已从实验室走向消费市场。然而，2025年曝光的某品牌脑机接口设备漏洞（CVE-2025-3278）引发了行业对神经数据安全的深度反思。本文围绕神经接口安全的核心矛盾&a…...
Clickhouse 配置参考
Clickhouse 配置参考 适用版本 21.3.9.84 config.xml 配置 <?xml version"1.0"?> <!--NOTE: User and query level settings are set up in "users.xml" file. --> <yandex><access_control_path>/data/clickhouse/clickhous…...
利用deepseek+Mermaid画流程图
你是一个产品经理，请绘制一个流程图，要求生成符合Mermaid语法的代码，要求如下： 用户下载文件、上传文件、删除文件的流程过程符合安全规范细节具体到每一步要做什么 graph LRclassDef startend fill:#F5EBFF,stroke:#BE8FED,str…...
高频面试题：Android MVP/MVVM/MVI这几种架构在实际生产中，各自的优缺点和适用场景是什么
安卓开发早期的架构模式相对简单，许多开发者直接在Activity或Fragment中堆砌业务逻辑和UI操作，这种方式虽然在小型项目中看似高效，但随着代码量的增加，很快就会导致逻辑混乱、难以测试和维护的问题。Activity和Fragment作为安卓框…...
leetcode0146. LRU 缓存-medium
1 题目：LRU 缓存 官方标定难度：中 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类： LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存 int get(int key) 如果关键字 key 存在于缓…...
SuperMap iClient3D for WebGL 如何加载WMTS服务
在 SuperMap iClient3D for WebGL 中加载WMTS服务时，参数配置很关键！下面我们详细介绍如何正确填写参数，确保影像服务完美加载。 一、数据制作 对于上述视频中的地图制作，此处不做讲述，如有需要可访问：Onl…...
组件自身如何向外暴露一个子组件
最近在开发是遇到一个问题，原本是在组件内的一个功能被ui设计稿给搞到了外面，产品也不同意放在子组件内。于是一个问题就来，抽出来放到外面的部分依赖的也是组件内部的数据和逻辑，所以如果外面再重写这一部分，显然浪费感情，并且又要把依赖关系挪出去，也不划算。 于是，…...
《软件设计师》复习笔记（11.4）——处理流程设计、系统设计、人机界面设计
目录 一、业务流程建模 二、流程设计工具 三、业务流程重组（BPR） 四、业务流程管理（BPM） 真题示例： 五、系统设计 1. 主要目的 2. 设计方法 3. 主要内容 4. 设计原则 真题示例： 六、人机界面设…...
深入解析B站androidApp接口：从bilibili.api.ticket.v1.Ticket/GetTicket到SendMsg的技术分析
前言 最近一段时间，我对B站的App接口进行了深入分析，特别是关注了认证机制和私信功能的实现。通过逆向工程和网络抓包，发现了B站移动端API的底层工作原理，包括设备标识生成机制、认证流程和消息传输协议。本文将分享这些研究成果…...
#去除知乎中“盐选”付费故事
添加油猴脚本，去除知乎中“盐选”付费故事 // UserScript // name 盐选内容隐藏脚本 // namespace http://tampermonkey.net/ // version 0.2 // description 自动隐藏含有“盐选专栏”或“盐选”文字的回答卡片 // author YourName // mat…...
MATLAB脚本实现了一个转子系统的参数扫描和分岔分析
% 参数扫描范围 clc; clear; close all;S_values 500:200:20000; % 转速范围% 定义系统参数 N 5; % 质量点数量 num_nodes N; % 节点数 num_dofs_per_node 4; % 每个节点的自由度数 num_elements num_nodes-1; % 单元数 total_dofs num_nodes * num_dofs_per_node; % 总自…...
UWP发展历程
通用Windows平台(UWP)发展历程 引言 通用Windows平台(Universal Windows Platform, UWP)是微软为实现"一次编写，处处运行"的愿景而打造的现代应用程序平台。作为微软统一Windows生态系统的核心战略组成部分，UWP代表了从传统Win32应用向现代应…...
数据库相关概念，关系型数据库的核心要素，MySQL（特点，安装，环境变量配置，启动，停止，客户端连接），数据模型
目录 数据库相关概念 MySQL（特点，安装，环境变量配置，启动和停止，客户端连接） MySQL数据库的特点 Windows下安装MySQL MySQL 8.0.36（安装版） MySQL安装 配置Path环境变量 MySQ…...
Facebook隐私保护：从技术到伦理的探索
在这个数字化时代，隐私保护已成为公众关注的焦点。Facebook，作为全球最大的社交媒体平台之一，其用户隐私保护问题更是引起了广泛的讨论。本文将从技术层面和伦理层面探讨 Facebook 在隐私保护方面的努力和挑战。 技术层面的隐私保护 在技术…...