50天50个前端小项目（纯html+css+js）第二天（进度栏）

mzldustu

已于 2022-10-19 23:49:18 修改

阅读量325

点赞数 1

分类专栏： 50Day50前端基础小项目(纯三件套) 文章标签：前端 css javascript html

于 2022-10-15 23:07:19 首次发布

本文链接：https://blog.csdn.net/qq_45628733/article/details/127342076

版权

本文介绍如何使用HTML、CSS和JavaScript实现一个进度条功能，常见于在线表单中。详细展示了HTML结构、CSS样式设定（包括过渡效果和按钮状态）以及简单的JavaScript逻辑，用于切换阶段并更新进度。项目难度适中，适合前端初学者练习。

摘要由CSDN通过智能技术生成

2/50
这个小项目主要是实现一个进度栏的功能，常见于我们网申填写简历表单的时候，可能会有一些喜欢扒户口的公司，可能会让你填一大堆信息，还分阶段，本次秋招就填过不少，（个人感觉这种公司其实挺让人无语哈哈哈）先看大概实现的效果：
一开始的时候：
默认在1阶段，然后prev（前一个）是默认没办法点的
在这里插入图片描述
中间阶段：prev和next都是可以点击的

最后阶段：next就被禁用了，无法点击了

html部分直接上代码吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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">