大家好,我是宝哥。
和大家分享本周比较炫的实战小项目,一起来看看有哪些让你眼前一亮的吧!
#实战推荐目录(点击可直达源码详情):
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 实现展开/收起的动画效果。
实现原理
项目通过 HTML 结构定义多个问答内容区块 (
div.faq
)。每个问答区块包含一个问题标题 (
h3.faq-title
) 和一个答案内容 (p.faq-text
)。还包含一个按钮 (
button.faq-toggle
),用来控制答案内容的展开和收起。按钮的图标 (
<i>
) 使用 Font Awesome 字体图标库。CSS 样式定义了问答区块的样式、按钮的样式以及展开/收起的动画效果。
JavaScript 代码通过遍历所有按钮 (
faq-toggle
),为每个按钮添加点击事件监听器。点击按钮时,会切换其父元素 (
faq
) 的类名 (active
),从而控制答案内容的显示和隐藏,并根据状态切换按钮的图标。
在线预览
https://qdkfweb.cn/50projects50days/faq-collapse/
关于我
我是宝哥,微信:caibaojian89(蔡宝坚89年)
35+的老程序员,每日分享前端技术,关注下面二维码,围观我的朋友圈
关注我,加星标,明天见!
关注下方宝哥微信,围观我的朋友圈,领10本前端电子书!