前言

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

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

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

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

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

✅ [Double Vertical Slider（双垂直滑块）](#Double Vertical Slider（双垂直滑块） "#heading-3")
✅ [Toast Notification（Toast 通知）](#Toast Notification（Toast 通知） "#heading-6")
✅ [Github Profiles（请求git文件）](#Github Profiles（请求git文件） "#heading-9")
✅ [Double Click Heart（双击出现♥♥）](#Double Click Heart（双击出现♥♥） "#heading-12")
✅ [Auto Text Effect（自动文本出现效果）](#Auto Text Effect（自动文本出现效果） "#heading-15")

下期解析 31day-35day，项目展示。

传送门🚀

26、Double Vertical Slider（双垂直滑块）

主要关注点：实现一个垂直滑块，允许用户在不同的内容之间切换，并且颜色还相同。

实现效果：

这个垂直滑块允许用户浏览不同的内容块，包括标题和描述。用户可以使用上下按钮来切换内容块。每个内容块都有不同的背景颜色或背景图像。

实现关键代码

HTML 结构：页面包含了左右的滑块。

html 复制代码

<div class="slider-container">
      <div class="left-slide">
        <!-- 省略左侧内容块 -->
      </div>
      <div class="right-slide">
        <!-- 省略右侧内容块 -->
      </div>
      <div class="action-buttons">
        <button class="down-button">
          <i class="fas fa-arrow-down"></i>
        </button>
        <button class="up-button">
          <i class="fas fa-arrow-up"></i>
        </button>
      </div>
    </div>

JavaScript 逻辑：实现了点击滑动事件处理逻辑。

js 复制代码

// 看看那一个是活跃的
let activeSlideIndex = 0
// 将左边的滑倒最后一个，初始化完成，运行中会形成视觉差的滑动
slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`

upButton.addEventListener('click', () => changeSlide('up'))
downButton.addEventListener('click', () => changeSlide('down'))

const changeSlide = (direction) => {
    //获取container的大小
    const sliderHeight = sliderContainer.clientHeight
    if(direction === 'up') {
        activeSlideIndex++
        if(activeSlideIndex > slidesLength - 1) {
            activeSlideIndex = 0
        }
    } else if(direction === 'down') {
        activeSlideIndex--
        if(activeSlideIndex < 0) {
            activeSlideIndex = slidesLength - 1
        }
    }
    // 操作的结果
    slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)`
    slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`
}

实现步骤：

创建一个包含左侧和右侧内容的滑块容器，添加上下按钮，用于切换内容块。
JavaScript逻辑：使用 DOM 获取容器的大小，采用 activeSlideIndex记住活跃的索引，利用移动 translateY，来生成动画。
使用CSS样式来布局和美化滑块和内容块
原理文字解：

----------------初始位置-------调整left的位置到底部---第一次滑动

掩藏展示 [O]背景---[▢]图片 | 🔴背景---[▢]图片 | [O]背景---[▢]图片

掩藏展示 [O]背景---[▢]图片 | 🔵背景---[▢]图片 | 🔴背景---[▢]图片

掩藏展示 [O]背景---[▢]图片 | ⚫背景---[▢]图片 | 🔵背景---🟨图片

当前展示 🔴背景---🟨图片 | 🟡背景---🟨图片 | ⚫背景---⬛图片

掩藏展示 🔵背景---⬛图片 | [O]背景---⬛图片 | 🟡背景 ---🟦图片

掩藏展示 ⚫背景---🟦图片 | [O]背景---🟦图片 | [O]背景---🟥图片

掩藏展示 🟡背景---🟥图片 | [O]背景---🟥图片 | [O]背景---[▢]红图片

CSS样式

🐯：左右两边采用的都是绝对定位。

css 复制代码

.left-slide {
  height: 100%;
  width: 35%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease-in-out;
}
.right-slide {
  height: 100%;
  position: absolute;
  top: 0;
  left: 35%; //向左来35%
  width: 65%;
  transition: transform 0.5s ease-in-out;
}

总结：

这篇文章介绍了如何创建一个垂直滑块，允许用户浏览不同的内容块。通过JavaScript和CSS，我们实现了一个交互式的滑块效果，用户可以使用上下按钮来浏览不同的内容。

主要还是这种颜色带来的冲击，对于用户是很强烈的。

27、Toast Notification（Toast 通知）

主要关注点：实现一个交互式的Toast通知功能，用于显示不同类型的通知消息。

实现效果：

这个页面包括一个按钮，点击按钮会触发显示Toast通知。Toast通知是临时的通知消息，可以显示不同类型的消息，如信息、成功或错误。

实现关键代码

HTML 结构：页面包含了按钮与toast弹窗布局。

html 复制代码

<div id="toasts"></div> 
<button class="btn" id="button">Show Notification</button>

JavaScript 逻辑：实现了对toast弹窗的实现。

js 复制代码

const button = document.getElementById('button')
const toasts = document.getElementById('toasts')

const messages = [
    'Message One',
    'Message Two',
    'Message Three',
    'Message Four',
]

const types = ['info', 'success', 'error']

// 监听按钮点击事件，显示Toast通知
button.addEventListener('click', () => createNotification())

// 创建并显示Toast通知
function createNotification(message = null, type = null) {
    const notif = document.createElement('div')
    notif.classList.add('toast')
    notif.classList.add(type ? type : getRandomType())

    notif.innerText = message ? message : getRandomMessage()

    toasts.appendChild(notif)

    // 设置定时器，在3秒后移除Toast通知
    setTimeout(() => {
        notif.remove()
    }, 3000)
}

// 随机获取消息内容
function getRandomMessage() {
    return messages[Math.floor(Math.random() * messages.length)]
}

// 随机获取通知类型
function getRandomType() {
    return types[Math.floor(Math.random() * types.length)]
}

实现步骤：

创建一个按钮，点击按钮触发显示Toast通知的事件。
使用JavaScript动态创建Toast通知，包括不同类型的通知和随机消息内容。
使用CSS样式布局页面元素，包括Toast通知的位置和样式。
使用定时器，在3秒后移除Toast通知。

CSS样式 🐯btn：对btn按钮点击的动画。

css 复制代码

.btn:focus {
  outline: none;
}

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

🐯toast：对Toast的样式。

css 复制代码

#toasts {
  position: fixed;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.toast {
  background-color: #fff;
  border-radius: 5px;
  padding: 1rem 2rem;
  margin: 0.5rem;
}

.toast.info {
  color: rebeccapurple;
}

.toast.success {
  color: green;
}

.toast.error {
  color: red;
}

总结：

这篇文章介绍了如何创建一个交互式的Toast通知功能，用于显示不同类型的通知消息。通过JavaScript和CSS，我们实现了一个具有随机消息内容和样式的Toast通知系统。

28、Github Profiles（请求git文件）

主要关注点：实现一个页面，允许用户搜索Github用户的请求。

实现效果：

这个页面包括一个搜索框，用户可以输入Github用户名来搜索用户。搜索结果会显示用户的个人资料，包括头像、用户名、简介以及关注者、关注中和仓库数量。此外，还会显示用户的前五个仓库链接。

实现关键代码

HTML 结构：页面包含了表单的请求。

html 复制代码

<form class="user-form" id="form"> 
    <input type="text" id="search" placeholder="Search a Github User"> 
</form> 
<main id="main"></main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js" integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ==" crossorigin="anonymous"></script>

JavaScript 逻辑：实现了请求git数据与布局。

js 复制代码

const APIURL = 'https://api.github.com/users/'
async function getUser(username) {
    try {
        const { data } = await axios(APIURL + username)

        createUserCard(data)
        getRepos(username)
    } catch(err) {
        if(err.response.status == 404) {
            createErrorCard('No profile with this username')
        }
    }
}

async function getRepos(username) {
    try {
        const { data } = await axios(APIURL + username + '/repos?sort=created')

        addReposToCard(data)
    } catch(err) {
        createErrorCard('Problem fetching repos')
    }
}

// 省略处理样式卡片与数据，我们关心请求

实现步骤：

创建一个搜索框，允许用户输入Github用户名进行搜索。
使用JavaScript和Axios库发送请求，获取用户的个人资料和仓库信息。
显示用户的个人资料，包括头像、用户名、简介以及关注者、关注中和仓库数量。
显示用户的前五个仓库链接。

CSS样式

🐯输入框：对输入框的一些样式修改。

css 复制代码

.user-form input {
  width: 100%;
  display: block;
  background-color: #4c2885;
  border: none;
  border-radius: 10px;
  color: #fff;
  padding: 1rem;
  margin-bottom: 2rem;
  font-family: inherit;
  font-size: 1rem;
  box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
    0 15px 40px rgba(0, 0, 0, 0.1);
}

// 解决：input内部文字颜色问题
.user-form input::placeholder {
  color: #bbb;
}

// 解决：聚焦出现线段问题
.user-form input:focus {
  outline: none;
}

总结：

这篇文章介绍了如何创建一个Github用户搜索页面，允许用户搜索Github用户并显示其个人资料以及前五个仓库。通过JavaScript和Axios，我们能够实现与Github API的交互，获取用户数据并动态显示在页面上。

我们主要关注的是：网络请求

js 复制代码

------------引入--------------
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js" integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ==" crossorigin="anonymous"></script>
------------使用--------------
const { data } = await axios(APIURL + username)

29、Double Click Heart（双击出现♥♥）

主要关注点：双击的实现。

实现效果：

这个页面包括一个图片，用户可以双击图片，双击后会在图片的位置出现红色的点赞红心，并在下方显示点赞次数。

实现关键代码

HTML 结构：页面包含了设计点击区域与点赞数量。

html 复制代码

<h3>Double click on the image to <i class="fas fa-heart"></i> it</h3>
<small>You liked it <span id="times">0</span> times</small>

<div class="loveMe"></div>

JavaScript 逻辑：实现了双击、位置的确定

双击

js 复制代码

let clickTime = 0
loveMe.addEventListener('click', (e) => {
  if (clickTime === 0) {
    clickTime = new Date().getTime()
  } else {
    if ((new Date().getTime() - clickTime) < 800) {
      createHeart(e)
      clickTime = 0
    } else {
      clickTime = new Date().getTime()
    }
  }
})

位置的确定

js 复制代码

const createHeart = (e) => {
  const x = e.clientX //点击的鼠标到边框的距离
  const y = e.clientY

  const leftOffset = e.target.offsetLeft //盒子到边框的距离
  const topOffset = e.target.offsetTop

  const xInside = x - leftOffset
  const yInside = y - topOffset

  heart.style.top = `${yInside}px`
  heart.style.left = `${xInside}px`
}

添加与移除双心

js 复制代码

const createHeart = (e) => {
    const heart = document.createElement('i')
    heart.classList.add('fas')
    heart.classList.add('fa-heart')
    
    // 省略位置的确定
    
    loveMe.appendChild(heart)

    times.innerHTML = ++timesClicked

    setTimeout(() => heart.remove(), 1000)
}

实现步骤：

创建一个包含图片的页面，提示用户双击图片进行点赞操作。
使用JavaScript监听图片的点击事件，当用户双击图片时，创建一个红色的点赞红心，并在页面上显示点赞次数。
使用CSS样式设置红心的动画效果，使其从小到大逐渐消失。

CSS样式

🐯小心心：定义了小心心的形成与消失。

css 复制代码

.loveMe .fa-heart {
  position: absolute;
  animation: grow 0.6s linear;
  transform: translate(-50%, -50%) scale(0);
}

@keyframes grow {
  to {
    transform: translate(-50%, -50%) scale(10);
    opacity: 0;
  }
}

总结：

这篇文章介绍了如何创建一个简单的点赞动画页面，用户可以双击图片点赞并计数点赞次数。通过JavaScript和CSS，我们实现了一个有趣的交互效果。

扩展：优化双击逻辑：

Vue的网页提供双击的监听事件，在H5移动端是不能使用的，

移动端注意：

使用点击事件为： @touchstart="onDoubleClick()"。
使用的data()参数：oneClickTimer: null,lastTimeDelta: 0,clickState: true,

js 复制代码

onDoubleClick() {
    // 点击效果配合上touchstart才能实现很好的解决办法
    let currentTime = Date.now();
    if (currentTime - this.lastTimeDelta < 400 && this.clickState) {
      console.log("双击");
      this.clickState = false;
    } else {
      console.log("单击");
      this.clickState = true;
    }
    clearTimeout(this.oneClickTimer);
    this.oneClickTimer = setTimeout(() => {
      this.clickState = false;
    }, 300);
    // 点击的事件间隔
    this.lastTimeDelta = Date.now();
},

30、Auto Text Effect（自动文本出现效果）

主要关注点：文字会自动逐个字打印出来。

实现效果：

这个页面包括一个标题，标题上的文字会自动逐个字打印出来。用户可以通过输入框调整打印速度。

实现关键代码

HTML 结构：文字的容器展示与调整速度容器的位置。

html 复制代码

<h1 id="text">Starting...</h1>

<div>
  <label for="speed">Speed:</label>
  <input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1">
</div>

JavaScript 逻辑：字符的展示。

js 复制代码

const textEl = document.getElementById('text')
const speedEl = document.getElementById('speed')
const text = 'We Love Programming!'
let idx = 1 //初始出来字符1个
let speed = 300 / speedEl.value  //控制速度

writeText() //调用函数

function writeText() {
    textEl.innerText = text.slice(0, idx)

    idx++

    if(idx > text.length) {
        idx = 1
    }

    setTimeout(writeText, speed)
}

// 控制调整速度
speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)

实现步骤：

创建一个包含标题和输入框的页面，标题上的文字会自动逐个字打印出来。
使用JavaScript监听输入框的值，根据用户输入的速度调整文字打印的速度。
效果的展现，是利用字符的切割slice,通过idx++调整文字被切割的长度，该方法不会修改原数据，相对的 speed 越小，出现的速度就越快。

CSS样式

🐯字符居中：body的设置，导致字符的居中缓慢展示。

css 复制代码

body {
  background-color: darksalmon;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

总结：

这篇文章介绍了如何创建一个文字自动打印效果的页面，用户可以通过输入框调整打印速度，文字会逐个字地显示在标题上。

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

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

前言

目录

传送门🚀

26、Double Vertical Slider（双垂直滑块）

实现效果：

实现关键代码

27、Toast Notification（Toast 通知）

实现效果：

实现关键代码

28、Github Profiles（请求git文件）

实现效果：

实现关键代码

29、Double Click Heart（双击出现♥♥）

实现效果：

实现关键代码

30、Auto Text Effect（自动文本出现效果）

实现效果：

实现关键代码