前端项目共读！50个项目50天之02：进度步骤条的HTML、CSS和JavaScript实现

前端开发博客

于 2024-05-01 10:04:13 发布

阅读量930

点赞数 10

文章标签：前端 html css javascript 开发语言

本文链接：https://blog.csdn.net/lgno2/article/details/138385254

版权

大家好，我是宝哥。

今天讲50个项目50天之02：进度步骤条。我会给出详细HTML、CSS和JavaScript代码，并讲基本原理、实现方法和核心代码。

源码下载地址：

https://github.com/bradtraversy/50projects50days/tree/master/progress-steps

基本原理

本项目旨在帮助用户可视化地跟踪多步骤流程的进度。它使用水平进度条和进度圆圈直观地展现当前步骤的位置以及总步骤数。用户可以通过“上一步”和“下一步”按钮在步骤间进行切换。

效果预览

在线预览（文末阅读原文链接直达，昨天有网友反映官网慢，为了更快的速度，我把文中的谷歌css字体去掉，并搬到我的主机上，文末链接是在我的网站上。以后就不再强调这个问题）：https://qdkfweb.cn/50projects50days/progress-steps/

实现方法

该进度步骤功能通过以下方法实现：

使用 HTML 结构定义进度条、进度圆圈和按钮的布局。
使用 CSS 样式定义进度条、进度圆圈和按钮的视觉效果，并利用 CSS 变量和 transition 实现动态变化。
使用 JavaScript 操作 DOM 元素，监听按钮点击事件，更新进度条宽度、圆圈激活状态以及按钮的禁用状态。

核心代码

HTML 结构

.progress-container 容器包含进度条 (.progress) 和进度圆圈 (.circle)。
按钮 (.btn) 用于控制步骤的切换。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Progress Steps</title>
  </head>
  <body>
    <div class="container">
      <div class="progress-container">
        <div class="progress" id="progress"></div>
        <div class="circle active">1</div>
        <div class="circle">2</div>
        <div class="circle">3</div>
        <div class="circle">4</div>
      </div>

      <button class="btn" id="prev" disabled>Prev</button>
      <button class="btn" id="next">Next</button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS 样式

变量 --line-border-fill 和 --line-border-empty 定义了已完成和未完成进度条的颜色。
.progress 样式控制进度条的外观，并利用 transition 实现平滑的动画效果。
.circle 样式定义进度圆圈的外观，.circle.active 样式用于突出显示当前步骤的圆圈。
.btn 样式定义按钮的外观，:disabled 伪类控制禁用按钮的样式。

:root {
  --line-border-fill: #3498db;
  --line-border-empty: #383838;

}

* {
  box-sizing: border-box;
}

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

.container {
  text-align: center;
}

.progress-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 30px;
  max-width: 100%;
  width: 350px;
}

.progress-container::before {
  content: '';
  background-color: var(--line-border-empty);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 100%;
  z-index: -1;
}

.progress {
  background-color: var(--line-border-fill);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 0%;
  z-index: -1;
  transition: 0.4s ease;
}

.circle {
  background-color: #f1f1f1;
  color:#e2e2e2;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--line-border-empty);
  transition: 0.4s ease;
}

.circle.active {
  border-color: var(--line-border-fill);
}

.btn {
  background-color: var(--line-border-fill);
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  padding: 8px 30px;
  margin: 5px;
  font-size: 14px;
}

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

.btn:focus {
  outline: 0;
}

.btn:disabled {
  background-color: var(--line-border-empty);
  cursor: not-allowed;
}

JavaScript 代码

获取进度条、按钮和进度圆圈的 DOM 元素引用。
currentActive 变量记录当前激活的步骤序号。
“下一步”按钮的点击事件处理程序:
- currentActive 增 1。
- 限制 currentActive 的取值范围。
- 调用 update 函数更新进度条和圆圈状态。
“上一步”按钮的点击事件处理程序:
- currentActive 减 1。
- 限制 currentActive 的取值范围。
- 调用 update 函数更新进度条和圆圈状态。
update 函数:
- 遍历所有进度圆圈，根据其索引和 currentActive 的值判断是否将其激活 (.active)。
- 计算已完成进度条的宽度。
- 根据 currentActive 的值启用或禁用 “上一步” 和 “下一步” 按钮。

const progress = document.getElementById('progress')
const prev = document.getElementById('prev')
const next = document.getElementById('next')
const circles = document.querySelectorAll('.circle')

let currentActive = 1

next.addEventListener('click', () => {
    currentActive++

    if(currentActive > circles.length) {
        currentActive = circles.length
    }

    update()
})

prev.addEventListener('click', () => {
    currentActive--

    if(currentActive < 1) {
        currentActive = 1
    }

    update()
})

function update() {
    circles.forEach((circle, idx) => {
        if(idx < currentActive) {
            circle.classList.add('active')
        } else {
            circle.classList.remove('active')
        }
    })

    const actives = document.querySelectorAll('.active')

    progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%'

    if(currentActive === 1) {
        prev.disabled = true
    } else if(currentActive === circles.length) {
        next.disabled = true
    } else {
        prev.disabled = false
        next.disabled = false
    }
}

结语

通过理解本项目的代码，您学习了如何使用 HTML、CSS 和 JavaScript 构建可视化的进度步骤功能。您可以根据需要扩展此项目的功能，例如添加动画效果、自定义外观样式、或者集成到更大的项目中，帮助用户更好地跟踪流程进度。

动图全过程展示：

在线预览（点底部原文链接可直达）：https://qdkfweb.cn/50projects50days/progress-steps/

最后

如果你觉得宝哥今天的分享对你有帮助，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。

以后我也会多尝试共读其它项目，如果看到喜欢的项目也可以留言告诉我，今天的教程你学会了吗？学会了，就在评论区刷一个，学会了。

欢迎长按图片加好友，宝哥会第一时间和你分享前端行业趋势，面试资源，学习途径等等。

添加好友备注【加群】拉你进技术交流群

公众号：前端开发博客 专注 前端开发技术，分享 前端开发资源和 WEB前沿资讯，如果喜欢我的分享，给宝哥点一个 赞 或者 分享 都是对我的支持

关注公众号后，在首页：

回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
回复「Vue脑图」获取 Vue 相关脑图
回复「思维图」获取 JavaScript 相关思维图
回复「简历」获取简历制作建议
回复「简历模板」获取精选的简历模板
回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「知识点」下载高清JavaScript知识点图谱
回复「读书」下载成长的相关电子书

前端开发博客

关注

10
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端项目共读！50个项目50天之02：进度步骤条的HTML、CSS和JavaScript实现

大家好，我是宝哥。今天讲50个项目50天之02：进度步骤条。我会给出详细HTML、CSS和JavaScript代码，并讲基本原理、实现方法和核心代码。源码下载地址：https://github.com/bradtraversy/50projects50days/tree/master/progress-steps基本原理本项目旨在帮助用户可视化地跟踪多步骤流程的进度。它使用水平进度条和进度圆圈直观...
复制链接

扫一扫