前端实战11：JS获取按键的键盘码信息

大家好，我是宝哥。

今天要分享的是前端实战项目系列中的第11个项目，一个关于事件键码的有趣实验。下面是具体的实现代码，包括HTML、CSS和JavaScript。

这个项目来源于Brad Traversy的GitHub仓库，一个包含50个迷你Web项目的集合，每个项目都使用HTML、CSS和JavaScript实现。这些项目旨在帮助开发者通过实践提升前端技能。

项目介绍

本项目旨在演示如何获取键盘按下时的键码信息。用户可以在页面上点击任意按键，页面将会显示该按键的键名 (event.key)、键码 (event.keyCode) 和字符代码 (event.code)。

源码下载地址

https://github.com/bradtraversy/50projects50days/tree/master/event-keycodes

在线预览(文末原文链接直达）：

https://qdkfweb.cn/50projects50days/event-keycodes/

前端实战项目系列正在更新：11/50

• 01：可展开卡片

• 02：进度条

• 03：旋转导航动画

• 04：隐藏的搜索小组件

• 05：模糊加载效果

• 06：滚动动画

• 07：拆分页面

• 08：表单输入框波纹

• 09：音频播放按钮面板

• 10：简洁的冷笑话生成器<