当前位置：首页 > news >正文

闲来无事，用HTML+CSS+JS打造一个84键机械键盘模拟器

news 来源：原创 2025/8/16 17:59:03

今天闲来无聊，突发奇想要用前端技术模拟一个机械键盘。说干就干，花了点时间搞出来了这么一个有模有样的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=",">&lt;<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 是不是挺像那么回事的？哈哈！ 它…...

编程日记 2025/8/16 17:59:03

极狐GitLab 项目导入导出设置介绍？

极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网导入导出设置 (BASIC SELF) 导入和导出相关功能的设置。配置允许的导入源在从其他系统导入项目之前，必须为该…...

编程日记 2025/8/17 6:20:54

极狐GitLab 项目 API 的速率限制如何设置？

极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网项目 API 的速率限制 (BASIC SELF) 引入于 15.10 版本，功能标志为rate_limit_for_unauthenticated_projects_api_…...

编程日记 2025/8/17 6:20:08

electron 渲染进程按钮创建新window，报BrowserWindow is not a constructor错误；

在 Electron 中，有主进程和渲染进程主进程：在Node.js环境中运行—意味着能够使用require模块并使用所有Node.js API 渲染进程：每个electron应用都会为每个打开的BrowserWindow（与每个网页嵌入）生成一个单独的渲染器进…...

编程日记 2025/8/16 7:51:55

【前沿】成像“跨界”测量——扫焦光场成像

01 背景眼睛是人类认识世界的重要“窗口”，而相机作为眼睛的“延伸”，已经成为生产生活中最常见的工具之一，广泛应用于工业检测、医疗诊断与影音娱乐等领域。传统相机通常以“所见即所得”的方式记录场景，传感器捕捉到的二维图像…...

编程日记 2025/8/10 22:01:49

基于C++（MFC）图形编辑界面工具

MFC 图形编辑界面工具一、背景喔，五天的实训终于结束了，学校安排的这次实训课名称叫高级程序设计实训，但在我看来，主要是学习了 Visual C .NET 所提供的 MFC（Microsoft Foundation Class)库所提供的类及其功能函数…...

编程日记 2025/8/17 6:20:06

Linux网络通信核心机制解析与层级架构探秘

作为现代操作系统的神经网络，Linux网络通信系统通过多层协作架构实现高效的数据传输机制。本文将从模块化设计、报文处理路径、核心组件交互等多个维度，解析Linux网络通信系统的实现原理与优化策略，并结合内核源码示例与性能调优实践&#xf…...

编程日记 2025/8/17 6:23:05

Tensorflow实现用接口调用模型训练和停止训练功能

语言：Python 框架：Flask、Tensorflow 功能描述：存在两个接口，一个接口实现开始训练模型的功能，一个接口实现停止训练的功能。实现：用一个全局变量存储在训练中的模型。 # 存储所有训练任务 training_task…...

编程日记 2025/8/17 6:20:08

HTTP测试智能化升级：动态变量管理实战与效能跃迁

在Web应用、API接口测试等领域，测试场景的动态性和复杂性对测试数据的灵活管理提出了极高要求。传统的静态测试数据难以满足多用户并发、参数化请求及响应内容验证等需求。例如，在电商系统性能测试中，若无法动态生成用户ID、订单号或实时提取…...

编程日记 2025/8/17 6:22:35

PyTorch 浮点数精度全景：从 float16/bfloat16 到 float64 及混合精度实战

PyTorch 在深度学习中提供了多种 IEEE 754 二进制浮点格式的支持，包括半精度（float16）、Brain‑float（bfloat16）、单精度（float32）和双精度（float64），并通过统…...

编程日记 2025/8/17 6:18:49

《软件设计师》复习笔记（14.2）——统一建模语言UML、事务关系图

目录 1. UML概述 2. UML构造块 (1) 事物（Things） (2) 关系（Relationships） 真题示例： 3. UML图分类 (1) 结构图（静态） (2) 行为图（动态） 4. 核心UML图详解 5.…...

编程日记 2025/8/17 6:18:48

基于C++（MFC）的细胞识别程序

基于 mfc 的细胞识别程序一、图像处理课程设计目标 1.1 课题与技术指标课题：利用图像处理技术设计细胞识别程序。技术指标： 实验 VS2019 MFC 开发平台待识别图像为 24bit 的真彩色细胞图像进行处理要求识别出细胞，并且保证准确度情况下…...

编程日记 2025/8/17 6:21:18

【前端HTML生成二维码——MQ】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档前端HTML生成二维码——MQ 前言本文将介绍前端HTML如何更具用户输入的内容生成对应的二维码，附页面代码、实现函数、js脚本。一、自定义显示页面1、效果图二、使用步骤1、引入库2、实现函数3、页面及函数代…...

编程日记 2025/8/17 6:18:47

Spring Boot自动配置原理深度解析：从条件注解到spring.factories

大家好！今天我们来深入探讨Spring Boot最神奇的特性之一——自动配置(Auto-configuration)。这个功能让Spring Boot如此受欢迎，因为它大大简化了我们的开发工作。让我们一起来揭开它的神秘面纱吧！👀 🌟 什么是自动配置…...

编程日记 2025/8/17 6:22:37

【unity实战】Animator启用root motion根运动动画，实现完美的动画动作匹配

文章目录前言1、动画分类2、如何使用根位移动画？ 一、根位移动画的具体使用1、导入人形模型2、导入动画3、配置动画参数4、配置角色Animator动画状态机5、使用代码控制人物前进后退二、问题分析三、Humanoid动画中的Root Motion机制及相关配置1、Humanoid动画中的…...

编程日记 2025/8/17 6:22:37

（51单片机）LCD显示数据存储（DS1302时钟模块教学）（LCD1602教程）（独立按键教程）（延时函数教程）（I2C总线认识）（AT24C02认识）

目录演示视频： 源代码 main.c LCD1602.c LCD1602.h AT24C02.c AT24C02.h Key.c Key.h I2C.c I2C.h Delay.c Delay.h 代码解析与教程： Dealy模块 LCD1602模块 Key模块 I2C总线模块 AT24C02模块 /E2PROM模块 main模块演示视频： &…...

编程日记 2025/8/17 6:21:15

2d深度预测

Depth anything v1 相对深度估计，要用绝对深度估计需要微调概要： 1 使用大量的未标注图像信息 2 采用优化策略—数据增强工具(作用在未标注图像) 3 进行辅助监督—继承语义分割知识（作用在未标注图像） 数据层面： …...

编程日记 2025/8/17 6:20:09

Android12 ServiceManager::addService源码解读

源码 Status ServiceManager::addService(const std::string& name, const sp<IBinder>& binder, bool allowIsolated, int32_t dumpPriority) {auto ctx mAccess->getCallingContext();// apps cannot add servicesif (multiuser_get_app_id(ctx.uid) >…...

编程日记 2025/8/17 6:21:17

【HDFS入门】HDFS性能调优实战：从基准测试到优化策略

目录引言 1 HDFS性能评估体系 1.1 性能评估体系架构 1.2 基准测试工具对比 2 TestDFSIO基准测试实战 2.1 TestDFSIO工作原理 2.2 测试执行步骤 2.3 结果分析指标 3 TeraSort基准测试实战 3.1 TeraSort测试流程 3.2 测试执行命令 3.3 关键性能指标 4 HDFS性能调优…...

编程日记 2025/8/17 6:20:55

Linux 内核开发/测试工具对比 Windows 驱动验证工具 (Driver Verifier)

Windows 的 Driver Verifier 是一个用于测试和验证驱动程序的强大工具。在 Linux 内核开发中，虽然没有一个完全等价的单一工具，但有多种工具和框架可以提供类似或更专业的功能。 Linux 内核开发和测试工具 1. KASAN (Kernel Address Sanitizer) 功能&…...

编程日记 2025/8/17 6:20:54

通信算法之269 ： OFDM信号的循环自相关特性用于无人机图传信号识别

OFDM信号的循环自相关特性是其循环平稳性的核心体现，如下： [相关仿真代码，联系，提供] 一、循环自相关特性来源 ‌循环前缀引入周期性‌ OFDM符号通过添加循环前缀（CP）形成符号周期结构，导致信号具有循环平稳性‌26。每个符号的CP与尾部数据重复，在时延等于FFT长度（N…...

编程日记 2025/8/17 6:16:34

【无人机】电子速度控制器（ESC）驱动电机，常见的电调协议，PWM协议，Oneshot协议，DShot协议

目录 1、ESCs & 电机 #1.1、ESC 协议 --ESC Protocols #1.1.1、PWM协议，需要校准 #1.1.2、One Shot 125协议，速率更快 #1.1.3、DShot ，减少延迟，无需校准 #1.1.4、无人机CAN 2、PWM 伺服系统和 ESC（电机控…...

编程日记 2025/8/16 21:57:03

LeadeRobot具身智能应用标杆：无人机X柔韧具身智能，空中精准作业游刃有余

当前,具身智能已成为全球科技领域的前沿焦点,更受到国家战略级重视,吸引科技产业巨头抢滩布局。但同时,具身智能的商业化路径、规模化应用场景、技术成本等难题也开始在资本界与产业圈引起广泛讨论。目前,万勋科技基于Pliabot 柔韧技术已推出多款具身智能柔韧机器人产品,在柔…...

编程日记 2025/8/17 6:19:00

WebSocket：实现实时双向通信的技术

WebSocket是一种网络通信协议，它在单个TCP连接上提供全双工通信。WebSocket协议在2011年被IETF（互联网工程任务组）标准化为RFC 6455，并由W3C（万维网联盟）制定了WebSocket API标准，使得客户端&am…...

编程日记 2025/8/17 6:21:17

探索 HumanoidBench：类人机器人学习的新平台

在科技飞速发展的当下，类人机器人逐渐走进我们的视野，它们有着和人类相似的外形，看起来能像人类一样在各种环境里完成复杂任务，潜力巨大。但实际上，让类人机器人真正发挥出实力，还面临着重重挑战。这篇文…...

编程日记 2025/8/15 4:25:55

「数据可视化 D3系列」入门第十一章：力导向图深度解析与实现

D3.js 力导向图深度解析与实现力导向图核心概念力导向图是一种通过物理模拟来展示复杂关系网络的图表类型，特别适合表现社交网络、知识图谱、系统拓扑等关系型数据。其核心原理是通过模拟粒子间的物理作用力（电荷斥力、弹簧引力等）自动计…...

编程日记 2025/8/17 6:17:06

「数据可视化 D3系列」入门第八章：动画效果详解（让图表动起来）

动画效果详解一、D3.js动画核心API1. d3.transition()2. transition.duration()3. transition.delay()4. 其他重要API 二、动画实现原理三、完整动画示例解析1. 柱状图生长动画2. 文本跟随动画四、动画效果优化技巧1. 缓动函数选择：2. 组合动画：3. 动画…...

编程日记 2025/8/17 6:17:07

index: 自动化浏览器智能体

GitHub：https://github.com/lmnr-ai/index 更多AI开源软件：https://www.aiinn.cn/ 在做浏览器自动化脚本时，我们常常需要编写大量代码来处理复杂的网页交互，不仅耗时耗力，还难以调试和优化，要是出错更是难以…...

编程日记 2025/8/17 6:22:38

网页端调用本地应用打开本地文件(PDF、Word、excel、PPT)

一、背景原因根据浏览器的安全策略，在网页端无法直接打开本地文件，所以需要开发者曲线救国。二、实现步骤前期准备： 确保已安装好可以打开文件的应用软件，如，WPS； 把要打开的文件统一放在一个文件夹&am…...

编程日记 2025/8/9 22:20:05

如何批量在多个 Word 文档末尾添加广告页面

Word是我们日常使用非常频繁的文档编辑软件，凭借其强大的文本处理功能，如文字输入、格式设置、段落排版、图片插入等，可以帮助我们轻松创建专业且美观的文档。不过呢当我们需要将这些文档分享给他人时，往往需要在每个文档的末尾添…...

编程日记 2025/8/14 22:50:34

JavaScript原生实现简单虚拟列表

旧笔记，最近使用时做了点新优化，之前只发在了个人博客上地址：JavaScript原生实现简单虚拟列表背景在公司项目中，需要给商品配置大量的属性值，可能其中一个属性的值数量就有成百上千条。一个商品会有很多属性&…...

编程日记 2025/8/9 1:27:57

安心联车辆管理平台应用前景分析

安心联车辆管理平台凭借其技术创新与行业适配能力，展现出广阔的应用前景。以下从技术驱动、行业覆盖、实际效益、市场策略及未来潜力五个维度进行分析： 一、技术驱动的核心竞争力高精度定位与多传感器融合安心联采用北斗/GPS双模定位技术，实…...

编程日记 2025/8/12 4:24:32

力扣每日打卡 2176. 统计数组中相等且可以被整除的数对(简单)

力扣 2176. 统计数组中相等且可以被整除的数对简单前言一、题目内容二、解题方法1. 暴力解法2.官方题解官方也是暴力解法前言这是刷算法题的第十三天，用到的语言是JS 题目：力扣 2176. 统计数组中相等且可以被整除的数对(简单) 一、题目内容给你一…...

编程日记 2025/8/16 14:11:37

OpenStack Yoga版安装笔记（22）Swift笔记20250418

一、官方文档 https://docs.openstack.org/swift/yoga/admin/objectstorage-components.html#https://docs.openstack.org/swift/yoga/admin/objectstorage-components.html# 二、对象存储简介（Introduction to Object Storage） OpenStack 对象存储&a…...

编程日记 2025/8/12 17:05:55

Linux 线程互斥

目录 Linux线程互斥进程线程间的互斥相关背景概念互斥量的接口初始化互斥量互斥量加锁和解锁锁的封装编辑互斥量加锁的非阻塞版本互斥量实现原理探究可重入VS线程安全概念常见的线程不安全的情况常见的线程安全的情况常见的不可重入的情况常见的…...

编程日记 2025/8/17 6:21:15

webgl入门实例-12WebGL 投影矩阵 (Projection Matrix)基本概念

WebGL 投影矩阵 (Projection Matrix) 投影矩阵是将3D场景从视图空间(相机空间)转换到裁剪空间的关键矩阵，它决定了3D物体如何投影到2D屏幕上。投影矩阵的作用定义3D空间到2D平面的映射方式确定视景体(view frustum)的形状和范围实现透视效果(近大远小)或正交投…...

编程日记 2025/8/17 6:23:06

《实战AI智能体》——邮件转工单的AI自动化

💡 为什么使用邮件转工单（AI自动化）模板想象一下，您的邮箱像是一个繁忙的宇宙港口，每封邮件都是一艘载着信息的飞船。当这些飞船抵达时，我们的自动化系统就像是一位高效的宇宙调度员，迅速将每艘飞船（邮件）转化为一艘艘探索号（工单），并为它们分配勇敢的宇航员（…...

编程日记 2025/8/17 6:22:38

YOLOv8 Bug 及解决方案汇总【2024.1.24更新】【环境安装】【训练断点续训】OMPError / KeyError

YOLOv8 Bug 及解决方案汇总：深入解析与应对引言 YOLOv8作为一款高性能的目标检测算法，在实际应用中难免会遇到各种各样的问题。本文将对YOLOv8常见的Bug进行汇总，并提供相应的解决方案，旨在帮助开发者更好地使用和优化YOLOv8。…...

编程日记 2025/8/17 6:21:16

健康养生：开启活力生活新篇章

在当代社会，熬夜加班、久坐不动、外卖快餐成为许多人的生活常态，随之而来的是各种亚健康问题。想要摆脱身体的疲惫与不适，健康养生迫在眉睫，它是重获活力、拥抱美好生活的关键。应对不良饮食习惯带来的健康隐患，饮…...

编程日记 2025/8/17 6:23:06

Yocto项目实战教程 · 第4章：4.3小节-层

🔍 B站相应的视频教程： 📌 Yocto项目实战教程-第4章-4.3小节-层记得三连，标为原始粉丝。在 Yocto 项目中，元数据（Metadata）不仅是构建系统的核心驱动力，更是实现高度定制化、可移植…...

编程日记 2025/8/17 6:14:57

小红书爬虫，小红书api，小红书数据挖掘

背景： 小红书（Xiaohongshu）是一款结合社交、购物和内容分享的移动应用，近年来在中国以及全球范围内拥有大量的用户群体。小红书上的内容包括用户的消费体验、生活方式、旅行分享、时尚搭配等。通过这些内容，用户可以了…...

编程日记 2025/8/15 23:51:55

选择 iOS 按键精灵无根有根越狱辅助工具的理由

节省成本使用 iOS 按键精灵，每台设备可为你减少 5 - 10 元的签名成本。对于需要使用大量脚本或者多设备操作的用户来说，长期下来能够节省一笔可观的费用。不断更新优化按键精灵团队始终致力于产品的更新与优化。新版本不断增加新功能&#x…...

编程日记 2025/8/17 6:19:01

电脑里的AI帮手：Open Interpreter智能助手食用指南

Open Interpreter简介如下： interpreter是一个使用python开发的命令行工具，可以让你在终端中使用类似AI对话的方式，只需简单输入指令要求，即可自动编写程序、执行代码，实现各种自动化操作interpreter有自动检测输出结…...

编程日记 2025/8/14 19:10:11

Windows软件界面分析软件-控件识别工具

Inspect.exe 这是微软提供的一款 UI 自动化检查工具，主要用于开发和测试应用程序的辅助功能（Accessibility）及 UI 自动化。主要功能： 查看界面元素的属性（如名称、角色、状态、位置等）。支持 UIA&…...

编程日记 2025/8/17 6:16:35

iOS 冷启动时间监控：启动起点有哪些选择？

⏱️ iOS 冷启动时间监控：启动起点有哪些选择？ 作者：侯仕奇来源：sqi.io 在监控 iOS 冷启动性能时，一个关键问题是：如何精确记录 App 冷启动的开始时间？ 本文将对不同的“冷启动起点”监控方式…...

编程日记 2025/8/17 6:15:08

MacOS怎么显示隐藏文件

现象描述： 有些文件比如git的配置文件会作为隐藏文件存在。 Mac os默认是不显示隐藏文件的。但是很多场合下我们需要查看或者编辑这些隐藏文件。解决方法： 如下图所示，在Finder中使用Shift⇧Command⌘.快捷键显示和隐藏都是同样的按…...

编程日记 2025/8/14 17:30:56

苹果紧急修复两个已被利用的iOS漏洞，用于针对特定目标的复杂攻击

苹果公司已发布iOS 18.4.1和iPadOS 18.4.1更新，修复两个被用于针对特定iPhone用户实施高度定向、复杂攻击的关键零日漏洞。这两个漏洞存在于CoreAudio和RPAC组件中，攻击者可利用它们在受影响设备上执行任意代码或绕过安全保护机制。两个正被活跃利用…...

编程日记 2025/8/17 6:15:10

8.观察者模式：思考与解读

原文地址:观察者模式：思考与解读更多内容请关注：7.深入思考与解读设计模式引言在开发软件时，系统的某些状态可能会发生变化，而你希望这些变化能够自动通知到依赖它们的其他模块。你是否曾经遇到过，系统中某个对象…...

编程日记 2025/8/17 6:15:11

13.编码器的结构

从入门AI到手写Transformer-13.编码器的结构 13.编码器的结构代码整理自视频老袁不说话。 13.编码器的结构 T r a n s f o r m e r E n c o d e r : 输入 [ b , n ] TransformerEncoder:输入[b,n] TransformerEncoder:输入[b,n] E m b e d d i n g : − > [ b , n , d ]…...

编程日记 2025/8/16 17:53:31

java 设计模式之模板方法模式

简介模板方法模式：定义一个算法的基本流程，将一些步骤延迟到子类中实现。模板方法模式可以提高代码的复用性， 模板方法中包含的角色： 抽象类：负责给出一个算法的基本流程，它由一个模板方法和若干个基本…...

编程日记 2025/8/16 2:22:15

相关文章：