50 Projects 50 Days - Progress Steps 学习记录

最新推荐文章于 2024-10-18 13:51:52 发布

机计复计机

最新推荐文章于 2024-10-18 13:51:52 发布

阅读量514

点赞数

分类专栏：前端基础文章标签：学习前端 css html5 javascript

本文链接：https://blog.csdn.net/weixin_44982066/article/details/129973125

版权

本文记录了50 Projects 50 Days挑战中的Progress Steps项目，旨在巩固前端基础。通过HTML、CSS和JavaScript实现了一个无框架的进度条组件。详细介绍了HTML结构、CSS样式（包括伪类元素和定位）以及JavaScript逻辑，特别是如何处理进度节点和进度条的交互。

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

50 Projects 50 Days不使用任何前端框架，适合初学者练手，巩固前端基础，在这里记录一下学习过程，尤其是一些细节上的问题。

项目地址

Progress Steps

展示效果

Progress Steps
在这里插入图片描述

实现思路

进度条和结点分开处理：
1. 步骤结点外观通过设置border的圆角和颜色得到；当点击按钮时根据计算将对应结点外边框颜色变更为蓝色。
2. 进度槽默认外观通过伪类before来实现（也可以单独再写一个HTML元素），以父盒子为初始定位，构造一个类似的横线的盒子，层级设置低一些，被结点所覆盖。
3. 进度条的外观则再定义一个和before伪类定位、层级、高度相同的盒子，而它的宽度默认为0，每次点击按钮时通过程序计算改变。

按钮触发的程序：
1. 用一个数字记录目前进度的位置。
2. 进度前的结点设置active类，进度后的移除active类。
3. 对进度条的样式宽度重新计算。
4. 根据当前位置，判断按钮是否还可用。

实现细节

HTML结构

在一个container，主要拆分为进度条和按钮两个区域，因此整体结构划分为progress-container和button。
progress-container除了几个结点外，再放入一个进度条即可。
button可以再用一个div包起来，也可以直接并排放，本身是行内元素，也可以居中作处理。
button和progress设置了一些id，主要在script中使用。

<div class="container">
	<div class="progress-container">
	     <div id="progress"></div>
	     <div class="node active">1</div>
	     <div class="node">2</div>
	     <div class="node">3</div>
	     <div class="node">4</div>
	 </div>
	 <button class="btn