gethub五十日五十个项目（2/50）

TT努力学习

本项目来自gethub五十日五十个项目
本人正处于前端学习阶段，本文目的是为了总结并巩固前端知识，如有错误欢迎指教。
源码放在附件。

效果

这个项目其实主要的原理和上一个项目是一样的，在js部分都是通过类名的增减操作达到效果的变换。

HTML

HTML部分的结构相对简单，container是总体的大盒子，progress-container则是为四个圆套入一个盒子。这样在考虑样式的时候我们其实只用先考虑这个大盒子和按钮之间的布局。
progress实际上是配合js使用的一个盒子，如果你去gethub，或者在附件运行了代码你会看见按钮可以操控一条蓝色的线，在我们看来是那一条长长的灰线变了颜色，但是实际上，是这条蓝线遮住了灰色的线。之后的circle从语义就可以看出是指圆。

然后我们来看总体样式，root可能很多人不明白是什么，其实在这里你把他理解为一个色彩库就好--line-border-fill就是我们存在这里的颜色，在后面需要颜色时可以通过var方法去引用存在这里的颜色。而root本身是一个伪类，可以用它声明一些全局变量。


如果看过我的上一篇总结，看到这种多个盒子并列的布局首先就会记得flex布局，以及盒子模式的切换，所以第一件事，就是用box-sizing切换成ie盒子模型，之后再body中我们要设置的东西无非是字体，宽高，还有盒子的位置。其实当设置到这里的时候你会发现你的盒子会缩在左上角，而样板给的是在中间。这个时候应该就有思路了。小项目的重点就在于培养独立思考能力，这也是我做这个项目以来最大的收获。所以我在总结的时候尽量会将当时的思路再次复述。
在之前我们就提到过我们想到应该用flex布局，flex布局的居中也是赫赫有名的。

现在主要的居中方式有三种，我在编写的时候一一实验，text-alight居中效果不太适用，line-height效果也不错，但是要注意flex布局下的内外边距问题。
最后还是flex布局的居中效果最好。之后的vh高度撑开，和上一项目基本一样，无需多言。overflow其实是最后为了避免溢出加入的。
最后在.container中再次进行text-aligh居中，保持样式一致。

如之前说，我们只用考虑.progress-container与按钮的关系。所以我们要先把他的样式设置好，四个圆在其中并列，直接设置display：flex。设置宽度margin值，这个时候我们会发现我们的圆当然现在是四个数字，显得很拥挤，这个时候如果上个项目了解了flex的常用属性，就可以自然想到justify-content在居中之外还有其他属性，space-between两端散开


然后在我们使用::before伪元素设置样式之前我们最好先把圆画出来，因为这个元素是为了画一条线，单纯的四个数字我们很难判断线的位置。圆的绘制很简单颜色，背景色，边框，圆角，以及圆的宽高，这个时候你可能会发现你的数字并不在你的圆心他歪歪的，我想你现在应该知道怎么将一个元素居中了。flex居中操作，这个时候我们的样式看上去就有模有样了。



之后我们使用：：before伪元素，因为我们要为框的中间画一条灰线，伪元素的特性正好适合。一般：：befor更多是引用一些外部图表，但我们这里打算用这种小盒子本身的颜色充当线条，所以content我们设置为空，颜色使用我们实现存好的灰色var（），使用绝对定位调整位置，同时，记得子绝父相原则，如果这个时候你把top设置好了，你会发现，你的现在的线条没有居中，这是因为你的线条本身具有一个高度，你在top移动时，他可不会帮你以中线为基准，这个时候就直接用transform移动线条，调整top的大小也可以实现这个效果，但是transform无疑是更加彻底更加稳定的居中。

接着和上一个项目一样设置active的变色

接着我们就只有最后一个部位，那就是.btn按钮样式了。
按钮样式非常简单这里不用多说，唯一注意的是，这里基本用到了大部分特殊样式，如果感兴趣可以一个个看看效果，我在最后还在注释里加了另一个我了解的特殊样式。


接着我们来看JS部分，JS部分实际上就两个内容，点击事件，与更新事件。我们通过currentActive记录点击后添加了active样式的圆的数量。最开始从一开始，因为第一个圆一直是绑定active的，之后其实我们可以先来写更新事件uodate（）。我们打算在每一次按钮点击时都调用一次update，所以active的样式操作最好在uodate里面完成。我们通过forEach进行圆的遍历，从参数拿到每个遍历出来的单个圆对象以及对应的index，实际上update每一次调用foreach都会遍历所有的圆，因此只要是序号在currentActive之下的我们都为他加入一个active，反之就剪掉一个active。
这个时候update还没有结束，我们必须要在update里面完成之后progress也就是我们设置width为0的那一条蓝线的宽度划分，具体方法，大家都很聪明，看了应该就明白了，之后则是按钮禁用的设置，我们将currentActive值是1也就是这个进度在第一个圆的，向前prev按钮禁止，因为他不能向前了，同理最后一个圆时将next禁止。
最后我们为按钮绑定click，并且，为了防止有人快速点按钮导致currentActive值突破天际或者直接负数，我们规定超过圆数量的的话就直接强行赋值。
至此，这个项目就完成了。

TT努力学习

总体样式布局的代码图不知道为什么跑到最上面去了，算了就这样吧

小伤口

是 gitHub吧

TT努力学习

小伤口 发表于 2022-12-5 21:34
是 gitHub吧

哈哈，对，手敲可能打错了

小伤口

TT努力学习 发表于 2022-12-6 15:52
哈哈，对，手敲可能打错了

哈哈哈，我也经常打错，共同学习