前端创意探索：速览「50projects50days」项目精华 - 第九部分（41-45 天）

猫头_2023-10-12 10:30

前言

主打：快速获取完善开发思想。

您是否在众多文章中看到过「50projects50days」项目的详细描述？垂涎三尺了？没有时间？如果您时间有限，或者只想快速领略其中的亮点，那么您来对地方了。

50projects50days项目地址：🌟🌟🌟🌟🌟

GitHub - bradtraversy/50projects50days: 50+ mini web projects using HTML, CSS & JS

简介： 想要快速领略「50projects50days」的精华，却又没有足够的时间？本文为您呈现这个项目系列的精华概览，每个项目都展示了不同的技术和创意，我们将深入剖析每个项目的关键代码和实现步骤，了解其背后的设计思想和技术原理。无论您是初学者还是有一定经验的开发者，本文都将为您提供灵感和知识，帮助您更好地理解和应用 HTML、CSS 和 JavaScript。无需大量时间投入，让我们一起探索这些项目，汲取前端技术的精华。前方的创意和知识等待着您的发现！

目录

由于篇幅问题，本文将分成数个部分来介绍项目系列。以下✅是已发布部分的导航

上期解析 36day-40day，项目展示。

本期解析 41day-45day，项目展示。

  • ✅ [Verify Your Account（验证码）](#Verify Your Account（验证码） "#heading-3")
  • ✅ [Live User Filter（Live用户筛选器）](#Live User Filter（Live用户筛选器） "#heading-6")
  • ✅ [Feedback Ui Design（反馈性心情的Ui设计）](#Feedback Ui Design（反馈性心情的Ui设计） "#heading-9")
  • ✅ [Custom Range Slider（自定义范围滑块）](#Custom Range Slider（自定义范围滑块） "#heading-12")
  • ✅ [Netflix Mobile Navigation（Netflix的移动导航）](#Netflix Mobile Navigation（Netflix的移动导航） "#heading-15")

下期解析 46day-50day，项目展示。

传送门🚀

41、Verify Your Account（验证码）

主要关注点：聚焦的伪类 --- valid 。

实现效果：

这是一个用于验证账户的简单界面示例，用户需要输入通过电子邮件发送的六位验证码

实现关键代码

HTML 结构：包括一个容器，用于放置验证账户的元素，包括标题、验证码输入框和信息提示。

html中进行必要的数字等限制！

html 复制代码 
<div class="container">
      <h2>Verify Your Account</h2>
      <p>We emailed you the six digit code to cool_guy@email.com <br/> Enter the code below to confirm your email address.</p>
      <div class="code-container">
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
      </div>
      <small class="info">
        This is design only. We didn't actually send you an email as we don't have your email, right?
      </small>
    </div>

JavaScript 逻辑：用于处理验证码输入，以便在输入数字后自动切换到下一个输入框。

js 复制代码 
const codes = document.querySelectorAll('.code')

codes[0].focus() // 聚焦在第一个上

codes.forEach((code, idx) => {
    code.addEventListener('keydown', (e) => {
        if(e.key >= 0 && e.key <=9) {
            codes[idx].value = ''
            // 在判断按下的键盘数字正确，就聚焦到下一个input中
            setTimeout(() => codes[idx + 1].focus(), 10)
        } else if(e.key === 'Backspace') {
            setTimeout(() => codes[idx - 1].focus(), 10)
        }
    })
})

实现步骤：

  1. 监听验证码输入框的键盘事件，以便在输入数字时自动切换到下一个输入框。
  2. 处理退格键，以便在删除数字时自动切换到前一个输入框。

CSS样式 🐯主要是容器的样式、验证码输入框的样式以及信息提示的样式。

我们注意一下 input 的输入框 code 类的valid 的使用

css 复制代码 
.code {
  caret-color: transparent;
  border-radius: 5px;
  font-size: 75px;
  height: 120px;
  width: 100px;
  border: 1px solid #eee;
  margin: 1%;
  text-align: center;
  font-weight: 300;
  -moz-appearance: textfield;
}

.code::-webkit-outer-spin-button,
.code::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.code:valid {
  border-color: #3498db;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
}

总结：

演示了一个简单的验证账户界面，用户可以输入验证码以确认其电子邮件地址，主要是css中 valid（聚焦的伪类） 的了解。

42、Live User Filter（Live用户筛选器）

主要关注点：怎么做到的实时用户筛选。

实现效果：

实时用户筛选的简单界面示例，用户可以通过输入名称和/或位置来搜索用户。

实现关键代码

HTML 结构：一个容器，用于放置用户筛选的元素，包括标题、搜索输入框和用户列表。

html 复制代码 
<div class="container">
      <header class="header">
        <h4 class="title">Live User Filter</h4>
        <small class="subtitle">Search by name and/or location</small>
        <input type="text" id="filter" placeholder="Search">
      </header>

      <ul id="result" class="user-list">
        <li>
          <h3>Loading...</h3>
        </li>
      </ul>
    </div>

JavaScript 逻辑：用于获取用户数据并实现实时筛选功能。

js 复制代码 
// JavaScript 代码
const result = document.getElementById('result')
const filter = document.getElementById('filter')
const listItems = []

getData()

filter.addEventListener('input', (e) => filterData(e.target.value))

async function getData() {
    // 使用随机用户生成 API 获取用户数据
    const res = await fetch('https://randomuser.me/api?results=50')

    const { results } = await res.json()

    // 清空结果列表
    result.innerHTML = ''

    results.forEach(user => {
        const li = document.createElement('li')

        listItems.push(li)

        li.innerHTML = `
            <img src="${user.picture.large}" alt="${user.name.first}">
            <div class="user-info">
                <h4>${user.name.first} ${user.name.last}</h4>
                <p>${user.location.city}, ${user.location.country}</p>
            </div>
        `

        result.appendChild(li)
    })
}

function filterData(searchTerm) {
    listItems.forEach(item => {
       //过滤小技巧，数据的名称全部小写对比`toLowerCase`
       if(item.innerText.toLowerCase().includes(searchTerm.toLowerCase())) {
            item.classList.remove('hide')
        } else {
            item.classList.add('hide')
        }
    })
}

实现步骤：

  1. 从随机用户生成 API 获取用户数据。
  2. 监听搜索输入框的输入事件，根据输入内容实时筛选用户列表，实时筛选可以利用的filter 过滤数据显示，在copy数据中。而本文是通过类的 hide 来控制隐藏，减少了数据的存在与消失阶段，减少渲染。
  3. 创建用户列表项，并根据输入内容隐藏或显示相应的项。

CSS样式

🐯包括容器的样式、标题样式、副标题样式、输入框样式、用户列表样式以及用户列表项的样式。

css 复制代码 
.user-list li.hide {
  display: none; /*关键隐藏代码*/
}

总结：

演示了一个实时用户筛选界面，用户可以根据名称和位置信息搜索用户，主打对数据的展示的处理，利用css特性，对hide类的切换，实现展示数据的展示消失。

43、Feedback Ui Design（反馈性心情的Ui设计）

主要关注点：对冒泡的使用。

实现效果：

用户反馈页面示例，用户可以选择不同满意度级别并发送反馈。

实现关键代码

HTML 结构：包含标题、满意度评级和发送按钮的容器。

html 复制代码 
<div id="panel" class="panel-container">
      <strong>How satisfied are you with our <br /> customer support performance?</strong>
      <div class="ratings-container">
        <div class="rating">
          <img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-17.png" alt="">
          <small>Unhappy</small>
        </div>

        <div class="rating">
          <img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-3.png" alt=""/>
          <small>Neutral</small>
        </div>

        <div class="rating active">
          <img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-30.png" alt=""/>
          <small>Satisfied</small>
        </div>
      </div>
      <button class="btn" id="send">Send Review</button>
    </div>

JavaScript 逻辑：用于处理用户的满意度评级和发送反馈。

js 复制代码 
const ratingsContainer = document.querySelector('.ratings-container')
ratingsContainer.addEventListener('click', (e) => {
    // 找到了rating类的标签，而且里面内容 
    if(e.target.parentNode.classList.contains('rating') && e.target.nextElementSibling) {
        removeActive() // 移除原先的active
        e.target.parentNode.classList.add('active')
        selectedRating = e.target.nextElementSibling.innerHTML //去获取标签<small>中的文本
    } else if(
        e.target.parentNode.classList.contains('rating') &&
        e.target.previousSibling &&
        e.target.previousElementSibling.nodeName === 'IMG'
    ) {
    // 这个是点击到文本的处理方式，就是直接点击到了标签<samll>
        removeActive()
        e.target.parentNode.classList.add('active')
        selectedRating = e.target.innerHTML
    }

})

看一下解释

js 复制代码 
const ratingsContainer = document.querySelector('.ratings-container')
ratingsContainer.addEventListener('click', (e) => {
     console.dir(e); // e是点击的表情的节点数据
     console.dir(e.target.parentNode); //就拿到了当前点击的最外围的类 rating 与 给其添加 active
})

实现步骤：

  1. 监听用户点击满意度评级，这个区域判断比较麻烦，看一下注释。
  2. 根据用户的选择，设置所选满意度评级。
  3. 处理用户点击发送按钮后的反馈显示。

CSS样式

🐯容器的样式、满意度评级样式、发送按钮样式等。

可以看一下按钮focus、active的一个处理

css 复制代码 
.btn {
  background-color: #302d2b;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 12px 30px;
  cursor: pointer;
}

.btn:focus {
  outline: 0;
}

.btn:active {
  transform: scale(0.98);
}

总结：

展示了一个用户反馈页面，用户可以选择满意度评级并发送反馈，通过一个冒泡的特性，实现了三个不同的按钮点击，出现不同的文案提醒。

44、Custom Range Slider（自定义范围滑块）

主要关注点：js 中注意转化为 number 的方式，与 scale 函数的调整left位置。

实现效果：

自定义滑块示例，用户可以通过滑块选择一个数值，并该数值会在滑块上方显示。

实现关键代码

HTML 结构：包含滑块和标签的容器。

html 复制代码 
<div class="range-container">
    <input type="range" id="range" min="0" max="100">
    <label for="range">50</label>
</div>

JavaScript 逻辑：XXXXXXXX。

js 复制代码 
range.addEventListener('input', (e) => {
  const value = +e.target.value // 转化为number
  const label = e.target.nextElementSibling

  const range_width = getComputedStyle(e.target).getPropertyValue('width')
  const label_width = getComputedStyle(label).getPropertyValue('width')

  const num_width = +range_width.substring(0, range_width.length - 2)
  const num_label_width = +label_width.substring(0, label_width.length - 2)

  const max = +e.target.max
  const min = +e.target.min

  const left = value * (num_width / max) - num_label_width / 2 + scale(value, min, max, 10, -10)

  label.style.left = `${left}px`


  label.innerHTML = value
})
// 这个函数，用于控制数值的范围的。
const scale = (num, in_min, in_max, out_min, out_max) => {
    return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
  }

实现步骤：

  1. 监听滑块的输入事件。
  2. 根据滑块的值设置标签的位置和显示的数值。
  3. 使用 scale 函数将滑块的值映射到标签的位置，10 -10 是为了控制头部显示的方块的 left 的距离的。

CSS样式

🐯页面的外观和布局，包括滑块的样式、标签的样式等。

看一下，对input的调整与兼容写法问题。

css 复制代码 
input[type='range'] {
  width: 300px;
  margin: 18px 0;
  -webkit-appearance: none;
}

input[type='range']:focus {
  outline: none;
}

input[type='range'] + label {
  background-color: #fff;
  position: absolute;
  top: -25px;
  left: 110px;
  width: 80px;
  padding: 5px 0;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

兼容

css 复制代码 
/* Chrome & Safari */
input[type='range']::-webkit-slider-runnable-track {
  background: purple;
  border-radius: 4px;
  width: 100%;
  height: 10px;
  cursor: pointer;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid purple;
  margin-top: -7px;
  cursor: pointer;
}

/* Firefox */
input[type='range']::-moz-range-track {
  background: purple;
  border-radius: 4px;
  width: 100%;
  height: 13px;
  cursor: pointer;
}

input[type='range']::-moz-range-thumb {
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid purple;
  margin-top: -7px;
  cursor: pointer;
}

/* IE */
input[type='range']::-ms-track {
  background: purple;
  border-radius: 4px;
  width: 100%;
  height: 13px;
  cursor: pointer;
}

input[type='range']::-ms-thumb {
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid purple;
  margin-top: -7px;
  cursor: pointer;
}

总结：

这项目展示了一个自定义滑块，用户可以通过滑块选择一个数值，并该数值会在滑块上方显示，这个数值的位置，值得我们深思一下，scale 的算法;

45、Netflix Mobile Navigation（Netflix的移动导航）

主要关注点：导航如何有层次的出来。

实现效果：

Netflix 移动导航的示例，用户可以点击按钮打开导航菜单，有层次的出现。

实现关键代码

HTML 结构：按钮、Netflix 的 logo、标题和一个多层嵌套的导航菜单。

html 复制代码 
<div class="nav nav-black">
  <div class="nav nav-red">
    <div class="nav nav-white">
      ......
    </div>
  </div>
</div>

JavaScript 逻辑：监听按钮的点击事件，打开和关闭导航菜单。

添加移除可看区域

js 复制代码 
// JavaScript 代码
const open_btn = document.querySelector('.open-btn')
const close_btn = document.querySelector('.close-btn')
const nav = document.querySelectorAll('.nav')

open_btn.addEventListener('click', () => {
    nav.forEach(nav_el => nav_el.classList.add('visible'))
})

close_btn.addEventListener('click', () => {
    nav.forEach(nav_el => nav_el.classList.remove('visible'))
})

实现步骤：

  1. 监听打开按钮（hamburger 按钮）的点击事件，以显示导航菜单。
  2. 监听关闭按钮的点击事件，以隐藏导航菜单。
  3. 通过下方的transition-delay 动画延迟，达到效果。

CSS样式

🐯用于页面的外观和布局，包括按钮的样式、导航菜单的样式等。

主要我们看一下： css的 transition-delay 动画延迟

css 复制代码 
.nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  transform: translateX(-100%); /* 集体隐藏 */
  transition: transform 0.3s ease-in-out;
}

.nav.visible {
  transform: translateX(0);
}

.nav-black {
  background-color: rgb(34, 31, 31);
  width: 60%;
  max-width: 480px;
  min-width: 320px;
  transition-delay: 0.4s;  /* 黑色-隐藏时我延迟0.4s */
}

.nav-black.visible {
  transition-delay: 0s;  /* 黑色-出现时我不延迟 */
}

.nav-red {
  background-color: rgb(229, 9, 20);
  width: 95%;
  transition-delay: 0.2s; /* 红色-隐藏时我延迟0.2s */
}

.nav-red.visible {
  transition-delay: 0.2s; /* 红色-出现时我延迟0.2s */
}

.nav-white {
  background-color: #fff;
  width: 95%;
  padding: 40px;
  position: relative;
  transition-delay: 0s;  /* 白色-隐藏时我不延迟 */
}

.nav-white.visible {
  transition-delay: 0.4s; /* 白色-出现时我0.4s */
}

总结：

项目展示了一个 Netflix 移动导航，用户可以通过点击按钮打开和关闭导航菜单，通过 transition-delay在隐藏与显示的时候进行延迟。

😘预知后事如何，待下回分解

相关推荐
fruge5 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia13 分钟前
vue中如何关闭eslint检测？
前端·javascript·vue.js
~甲壳虫14 分钟前
说说webpack中常见的Plugin？解决了什么问题？
前端·webpack·node.js
光影少年33 分钟前
vue2与vue3的全局通信插件，如何实现自定义的插件
前端·javascript·vue.js
As977_34 分钟前
前端学习Day12 CSS盒子的定位（相对定位篇“附练习”）
前端·css·学习
susu108301891136 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾38 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking38 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu40 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym1 小时前
Webpack性能优化指南：从构建到部署的全方位策略
前端·webpack·性能优化
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play