本周炫炫炫的前端实战项目

大家好，我是宝哥。

和大家分享本周比较炫的实战小项目，一起来看看有哪些让你眼前一亮的吧！

#实战推荐目录（点击可直达源码详情）：

1. 拆分登录页面

2. 表单波纹

3. 音频按钮面板

4. 冷笑话生成器

5. 键盘码信息

6. 手风琴

1、拆分登录页面

本项目演示了一个拆分式的页面，分左右两部分，分别展示不同的内容及其购买按钮。鼠标悬停在左侧或右侧时，对应的内容会放大，另一侧则会缩小，营造一种互斥互动的切换效果。

实现原理

该项目利用 CSS 的伪元素 (::before) 和 transition 属性实现背景色的覆盖和切换动画。JavaScript 则通过监听鼠标移入/移出事件，控制容器的 CSS 类，从而触发样式的切换。

在线预览

https://qdkfweb.cn/50projects50days/split-landing-page/

2、表单波纹

本项目演示了一个带有文字波纹效果的表单输入框。用户在输入框中输入文字时，相应的字母标签会产生波纹涟漪的动画效果。

实现原理

该项目利用 CSS 的 transition 属性控制文本的移动和颜色的变化，从而实现波纹效果。JavaScript 代码则负责将标签的文本内容拆分成一个个字母的 span 元素，并设置每个字母的延迟时间，使它们依次位移并变色，营造波浪扩散的视觉效果。

在线预览

https://qdkfweb.cn/50projects50days/form-wave/

3、音频按钮面板

本项目旨在创建一个可播放音效的按钮面板，方便用户点击不同的按钮来播放对应的音效文件。项目注重于简洁的设计和易用性，让用户可以轻松进行音效的控制。

实现原理

该项目利用 HTML、CSS 和 JavaScript 实现音效的播放和按钮的控制：

• 音效加载：使用 HTML 的 <audio> 标签定义多个音效文件。

• 按钮创建：利用 JavaScript 遍历音效列表，动态创建按钮元素。

• 音效播放控制：JavaScript 负责监听按钮点击事件，并控制音效的播放和停止。

在线预览

https://qdkfweb.cn/50projects50days/sound-board/

4、冷笑话生成器

本项目是一个利用网络 API 获取并展示冷笑话的趣味小应用。用户点击按钮，即可获取一条新的冷笑话内容。注重于简洁的设计和易用性，同时使用了 JavaScript 的异步操作 (Async/Await)语法来获取网络数据。

实现原理

• 项目利用第三方提供的冷笑话接口 (https://icanhazdadjoke.com/) 获取笑话内容。

• 用户点击按钮后，会触发 JavaScript 代码，通过 fetch API 请求笑话接口。

• 获取到笑话数据 (JSON 格式) 后，会将笑话内容提取出来并更新到页面上。

在线预览

https://qdkfweb.cn/50projects50days/dad-jokes/

5、获取按键码信息

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

实现原理

• 项目通过 HTML 创建一个用来显示按键信息的区域 (div id="insert")。

• 使用 JavaScript 为 window 对象添加 keydown 事件监听器。

• 当用户按下键盘按键时，事件监听器会触发并执行回调函数。

• 回调函数首先会根据 event.key 属性获取按下的按键名称。

• 然后，分别获取 event.keyCode 和 event.code 的值。

• 最后，将获取到的按键信息动态插入到 div id="insert" 区域中。

在线预览

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

6、问答手风琴

本项目是一个常见的面板式问答交互组件，也被称为手风琴效果。点击问题标题可以展开或收起对应的答案内容。项目注重于简洁的设计和易用性，使用纯 CSS 实现展开/收起的动画效果。

实现原理

1. 项目通过 HTML 结构定义多个问答内容区块 (div.faq)。

2. 每个问答区块包含一个问题标题 (h3.faq-title) 和一个答案内容 (p.faq-text)。

3. 还包含一个按钮 (button.faq-toggle)，用来控制答案内容的展开和收起。

4. 按钮的图标 (<i>) 使用 Font Awesome 字体图标库。

5. CSS 样式定义了问答区块的样式、按钮的样式以及展开/收起的动画效果。

6. JavaScript 代码通过遍历所有按钮 (faq-toggle)，为每个按钮添加点击事件监听器。

7. 点击按钮时，会切换其父元素 (faq) 的类名 (active)，从而控制答案内容的显示和隐藏，并根据状态切换按钮的图标。

在线预览

https://qdkfweb.cn/50projects50days/faq-collapse/

---

关于我

我是宝哥，微信：caibaojian89（蔡宝坚89年）

35+的老程序员，每日分享前端技术，关注下面二维码，围观我的朋友圈

关注我，加星标，明天见！

关注下方宝哥微信，围观我的朋友圈，领10本前端电子书！