前端创意探索：速览「50projects50days」项目精华 - 第三部分（11-15 天）
前言
主打：快速获取完善开发思想。
您是否在众多文章中看到过「50projects50days」项目的详细描述？垂涎三尺了？没有时间？如果您时间有限，或者只想快速领略其中的亮点，那么您来对地方了。
50projects50days项目地址：🌟🌟🌟🌟🌟
GitHub - bradtraversy/50projects50days: 50+ mini web projects using HTML, CSS & JS
简介： 想要快速领略「50projects50days」的精华，却又没有足够的时间？本文为您呈现这个项目系列的精华概览，每个项目都展示了不同的技术和创意，我们将深入剖析每个项目的关键代码和实现步骤，了解其背后的设计思想和技术原理。无论您是初学者还是有一定经验的开发者，本文都将为您提供灵感和知识，帮助您更好地理解和应用 HTML、CSS 和 JavaScript。无需大量时间投入，让我们一起探索这些项目，汲取前端技术的精华。前方的创意和知识等待着您的发现！
目录
由于篇幅问题，本文将分成数个部分来介绍项目系列。以下✅是已发布部分的导航
上期解析 6day-10day，项目展示。
本期解析 11day-15day，项目展示。
- ✅ Event Keycodes（监听事件按键的代码）
- ✅ Faq Collapse（问题解答折叠）
- ✅ Random Choice Picker（随机选取器）
- ✅ Animated Navigation（动画导航）
- ✅ Incrementing Counter（递增计数器）
下期解析 16day-20day，项目展示。
传送门🚀
11、Event Keycodes（监听事件按键的代码）
主要关注点：JavaScript 事件监听和处理。
实现效果：
通过按下键盘上的任意按键，实时获取按键的 KeyCode 和 Code。
实现关键代码
HTML 结构：通过按下键盘上的任意按键，实时获取按键的 KeyCode 和 Code。
<div id="insert">
<div class="key">
Press any key to get the keyCode
</div>
</div>
JavaScript 逻辑：实现按键事件监听和信息展示
const insert = document.getElementById('insert')
window.addEventListener('keydown', (event) => {
insert.innerHTML = `
<div class="key">
${event.key === ' ' ? 'Space' : event.key}
<small>event.key</small>
</div>
<div class="key">
${event.keyCode}
<small>event.keyCode</small>
</div>
<div class="key">
${event.code}
<small>event.code</small>
</div>
`
})
实现步骤：
- HTML 结构： 在 HTML 中，创建用于展示按键信息的容器。
- JavaScript 逻辑： 使用 JavaScript 监听
keydown事件，获取按下按键的key、keyCode和code，然后更新容器内的内容，展示这些信息。
CSS样式
🐯：样式的话，关于key的display
.key {
/*...*/
display: inline-flex; /* 使用弹性盒子布局，并设置为行内元素，使其不换行 */
flex-direction: column; /* 弹性子项的排列方向为垂直方向，使内容垂直排列 */
}
总结：
通过 JavaScript 的事件监听和处理，我们可以实时获取用户按下的键盘按键的 KeyCode 和 Code。这个功能可以用于开发调试、制作快捷键等场景，为用户提供更丰富的交互体验和操作便利。
12、Faq Collapse（问题解答折叠）
主要关注点：JS操作类的删除与添加采用的classList.toggle('类名')。
实现效果：
通过点击不同的卡片，实现卡片的展开和折叠效果。
实现关键代码
HTML 结构：定义卡片容器和面板元素
<!-- 卡片容器 -->
<div class="card-container">
<!-- 卡片 1 -->
<div class="card">
<!-- 标题 -->
<h3 class="card-title">Card 1 Title</h3>
<!-- 内容 -->
<p class="card-content">Content for Card 1</p>
<!-- 切换按钮 -->
<button class="card-toggle-btn">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</button>
</div>
<!-- 卡片 2 -->
<div class="card">
<!-- 标题 -->
<h3 class="card-title">Card 2 Title</h3>
<!-- 内容 -->
<p class="card-content">Content for Card 2</p>
<!-- 切换按钮 -->
<button class="card-toggle-btn">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</button>
</div>
<!-- 更多卡片... -->
</div>
JavaScript 逻辑：实现面板切换的功能
// 获取所有切换按钮
const toggles = document.querySelectorAll('.faq-toggle')
// 为每个切换按钮添加点击事件
toggles.forEach(toggle => {
toggle.addEventListener('click', () => {
// 切换问题卡片的活动状态
toggle.parentNode.classList.toggle('active')
})
})
实现步骤：
- 在 HTML 中创建问题卡片容器
.faq-container，每个问题卡片包含标题.faq-title、内容.faq-text和切换按钮.faq-toggle。 - 使用 JavaScript 监听切换按钮的点击事件，点击时切换问题卡片的
active类，从而实现卡片的展开和折叠。 - 使用 CSS 样式定义问题卡片的外观，包括背景颜色、边框、圆角等。通过添加和移除
active类来实现卡片的展开和折叠动画效果。
CSS样式
🐯容器样式：使用弹性盒子布局
.faq-container {
max-width: 600px;
margin: 0 auto;
}
🐯卡片样式：定义卡片的基本样式和动画效果
.faq {
background-color: transparent;
border: 1px solid #9fa4a8;
border-radius: 10px;
margin: 20px 0;
padding: 30px;
position: relative;
overflow: hidden;
transition: 0.3s ease;
}
/* ...（省略其他样式定义）... */
总结：
通过 JavaScript 实现了卡片的展开和折叠功能，结合 CSS 定义了卡片的样式和动画效果，使页面的卡片在交互中有更好的用户体验。点击切换按钮，JS处理关键使用classList.toggle会切换卡片的状态，实现卡片的展开和折叠，并在按钮上切换图标以指示状态的改变。
13、Random Choice Picker（随机选取器）
主要关注点：输入框的内容处理和标签的添加（实现闪动）。
实现效果：
用户在输入框中输入选择，以英文逗号分隔，然后按下 Enter 键，系统会随机选择一个选项并以标签形式显示在界面上。
实现关键代码
HTML 结构：定义输入框和标签容器
<div class="container">
<h3>Enter all of the choices divided by a comma (',').
<br>
Press enter when you're done</h3>
<textarea placeholder="Enter choices here..." id="textarea">
</textarea>
<div id="tags">
</div>
</div>
JavaScript 逻辑：处理输入文本并添加标签
监听按键
textarea.focus() // 自动聚焦
textarea.addEventListener('keyup', (e) => {
createTags(e.target.value) // 启动创建标签
if(e.key === 'Enter') {
setTimeout(() => {
e.target.value = ''
}, 10)
randomSelect() // 监听到Enter的按下开始随机
}
})
创建标签
function createTags(input) {
// 主要对输入的文字，根据“，”进行切割
const tags = input.split(',').filter(tag => tag.trim() !== '').map(tag => tag.trim())
tagsEl.innerHTML = ''
tags.forEach(tag => {
const tagEl = document.createElement('span')
tagEl.classList.add('tag')
tagEl.innerText = tag
tagsEl.appendChild(tagEl)
})
}
随机闪烁数据
function randomSelect () {
// 定时关闭闪动
const times = 30
const interval = setInterval(() => {
const randomTag = pickRandomTag()
// 随机闪动，给与标签，100毫米之后，删除标签
if (randomTag !== undefined) {
highlightTag(randomTag)
setTimeout(() => {
unHighlightTag(randomTag)
}, 100)
}
}, 100);
// 3秒之后关闭闪动
setTimeout(() => {
clearInterval(interval)
// 关闭之后，在100毫秒后选中一个常量
setTimeout(() => {
const randomTag = pickRandomTag()
highlightTag(randomTag)
}, 100)
}, times * 100)
}
function pickRandomTag () {
const tags = document.querySelectorAll('.tag')
return tags[Math.floor(Math.random() * tags.length)]
}
function highlightTag (tag) {
tag.classList.add('highlight')
}
function unHighlightTag (tag) {
tag.classList.remove('highlight')
}
实现步骤：
-
在 HTML 中创建输入框和标签容器，用户可以输入选项，每个选项用逗号分隔。
-
使用 JavaScript 监听输入框的键盘事件，当按下 Enter 键时，处理输入的文本，创建并显示选项标签，然后随机选择一个选项并高亮
关键来了，随机闪动的原理，随机给予一个标签高亮，100毫米之后，删除高亮标签类，持续
times的时间，在最后结束，清理Interval后100毫秒，随机给予一个标签高亮。 -
使用 CSS 样式定义输入框和标签的外观，包括背景颜色、边框、圆角等。
CSS样式
🐯输入框：输入框的优化
textarea {
border: none;
display: block;
width: 100%;
height: 100px;
font-family: inherit;
padding: 10px;
margin: 0 0 20px;
font-size: 16px;
}
textarea:focus {
outline: none;
}
🐯tag：tag的设计高亮
.tag {
background-color: #f0932b;
color: #fff;
border-radius: 50px;
padding: 10px 20px;
margin: 0 5px 10px 0;
font-size: 14px;
display: inline-block;
}
.tag.highlight {
background-color: #273c75;
}
总结：
通过 JavaScript 处理用户输入，将输入的选项显示为标签，并通过随机选择和高亮效果，实现了一个随机选择器，让用户可以输入选项，然后随机选择一个选项进行展示。
14、Animated Navigation（动画导航）
主要关注点：主要关注css动画
实现效果：
通过点击按钮，切换导航栏的展开和折叠状态，并且伴随动画效果。
实现关键代码
HTML 结构：定义方块容器和方块元素
<nav class="active" id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button class="icon" id="toggle">
<div class="line line1"></div>
<div class="line line2"></div>
</button>
</nav>
JavaScript 逻辑：实现面板切换的功能
const toggle = document.getElementById('toggle')
const nav = document.getElementById('nav')
toggle.addEventListener('click', () => nav.classList.toggle('active'))
实现步骤：
- 获取元素引用： 获取按钮和导航栏元素的引用。
- 点击事件监听： 监听按钮的点击事件。
- 切换导航栏状态： 在点击事件中，使用
classList.toggle('active')切换导航栏的active类，实现展开和折叠效果。
CSS样式
🐯容器nav的变化
/* 容器样式：为导航栏容器设置样式 */
nav {
background-color: #fff;
padding: 20px;
width: 80px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: width 0.6s linear;
overflow-x: hidden;
}
/* 激活状态容器样式：导航栏在激活状态下的宽度 */
nav.active {
width: 350px;
}
🐯容器导航数据的变化
/* 导航栏菜单列表样式：设置导航栏菜单的样式 */
nav ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
width: 0;
transition: width 0.6s linear;
}
/* 激活状态导航栏菜单列表样式：在激活状态下展开菜单 */
nav.active ul {
width: 100%;
}
/* 导航栏菜单项样式：设置导航栏每个菜单项的样式 */
nav ul li {
transform: rotateY(0deg);
opacity: 0;
transition: transform 0.6s linear, opacity 0.6s linear;
}
/* 激活状态导航栏菜单项样式：在激活状态下显示菜单项 */
nav.active ul li {
opacity: 1;
transform: rotateY(360deg);
}
/* 导航栏链接样式：设置导航栏链接的样式 */
nav ul a {
position: relative;
color: #000;
text-decoration: none;
margin: 0 10px;
}
🐯两条line画出初始的图案
/* 导航栏图标按钮样式 */
.icon {
background-color: #fff;
border: 0;
cursor: pointer;
padding: 0;
position: relative;
height: 30px;
width: 30px;
}
/* 导航栏图标按钮聚焦样式 */
.icon:focus {
outline: 0;
}
/* 导航栏图标按钮线条样式 */
.icon .line {
background-color: #5290f9;
height: 2px;
width: 20px;
position: absolute;
top: 10px;
left: 5px;
transition: transform 0.6s linear;
}
/* 导航栏图标按钮第二条线条样式 */
.icon .line2 {
top: auto;
bottom: 10px;
}
点击添加激活类，以后的旋转
/* 激活状态导航栏图标按钮第一条线条旋转样式 */
nav.active .icon .line1 {
transform: rotate(-765deg) translateY(5.5px);
}
/* 激活状态导航栏图标按钮第二条线条旋转样式 */
nav.active .icon .line2 {
transform: rotate(765deg) translateY(-5.5px);
}
总结：
实现了一个简单的导航栏切换效果。当用户点击按钮时，会切换导航栏的 active 类，从而触发导航栏的展开和折叠效果。
主要是对CSS的理解：
1、一半颜色的视觉误差
background-image: linear-gradient(
to bottom,
#eafbff 0%,
#eafbff 50%, //从这里的分割
#5290f9 50%,
#5290f9 100%
);
}
2、大小变化，按钮变化都是由transition的过渡效果
过渡时间：0.6s
width : 80px ---> 340px
btnline1 : 无 ----> rotate(-765deg) translateY(5.5px);
btnline1 : 无 ----> rotate(765deg) translateY(-5.5pxpx);
15、Incrementing Counter（递增计数器）
主要关注点：本示例中的重点在于通过 HTML、CSS 和 JavaScript 实现一个动态递增计数器，用于显示社交媒体的粉丝或订阅者数量。
实现效果：
在这个示例中，我们展示了三个递增计数器，分别用于展示 Twitter 的粉丝数、YouTube 的订阅者数以及 Facebook 的粉丝数。每个计数器都带有一个社交媒体图标，数字会逐渐增加到指定的目标值。
实现关键代码
HTML 结构：计数器的主要 HTML 结构
<div class="counter" data-target="12000">0</div>
<div class="counter" data-target="5000">0</div>
<div class="counter" data-target="7500">0</div>
JavaScript 逻辑：JavaScript 部分的逻辑代码
let counterNode = document.querySelectorAll(".counter-container .counter");
counterNode.forEach(counter=>{
counter.innerText = '0' //先给了 0
const updateCounter = () =>{
//加号，使target string变成 number
const target = +counter.getAttribute('data-target');
const c = +counter.innerText;
const increment = target / 200; //一次加多少，200次结束
if(c < target){
//取整
counter.innerText = `${Math.ceil(c + increment)}`
//使用setTimeout阻塞一下计算的顺畅行，别一次性渲染好，一次一次的迭代
setTimeout(updateCounter,1)
}else{
counter.innerText = target;
}
}
updateCounter()
})
实现步骤：
-
在 HTML 中，我们创建了三个包含社交媒体图标、计数器容器以及描述的元素。每个计数器初始显示为 0。
-
在 JavaScript 中，我们首先获取了所有的计数器元素，并设定递增速度。然后，我们遍历每个计数器，根据目标值和递增速度，逐渐更新显示的数字，直到达到目标值为止。
递增更新显示的数字的做法：使用
setTimeout阻塞一下计算的顺畅性，别一次性渲染好，一次一次的迭代
CSS样式
🐯无特殊学习点
总结：
这个示例演示了如何利用 HTML、CSS 和 JavaScript 实现一个动态递增计数器。通过设置目标值和递增速度，计数器会逐渐增加并显示在页面上，从而呈现出社交媒体的粉丝或订阅者数量的变化。图标、描述文字和样式的组合增强了用户体验，使计数器更加生动。
😘预知后事如何，待下回分解