前端创意探索：速览「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在隐藏与显示的时候进行延迟。

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

相关推荐
Summer不秃5 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰10 分钟前
Flutter踩坑记录（二）-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye16 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm18 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南：掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack：compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生1 小时前
如何用AI写小说(二)：Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07怎样让音频速度变慢？请跟随以下方法进行操作08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10【目标跟踪】相机运动补偿