# Learn_50projects50days

**Repository Path**: w_junjun/learn_50projects50days

## Basic Information

- **Project Name**: Learn_50projects50days
- **Description**: HTML,CSS,JavaScript的练习
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2021-11-28
- **Last Updated**: 2023-05-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 50 个仅用 HTML，CSS,JavaScript 实现的 web 项目

原项目地址：(github:50projects50days)[https://github.com/bradtraversy/50projects50days]

这个项目是我在原项目上的一个学习过程，记录自己的反思和疑问！

书籍：
《css 世界》的百度网盘分享：https://pan.baidu.com/s/1mA8Kr-7TGcztBmpYYJP_GA
提取码：Zvz1

网站分享：
一个漂亮的渐变网站：https://gradihunt.com/
Font Awesome 图标：https://www.runoob.com/font-awesome/fontawesome-tutorial.html
第三方组件的分享：

- better-scroll：better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
  (better-scroll)[https://www.bookstack.cn/read/better-scroll/0.md]

## 1.导航栏动画

这个案例实现的效果：

- 点击导航栏右端的小图标，可以将导航栏动态的收起；
- 点击收起后的小图标，可以将导航栏动态的展开；

### 分析源码

#### html 文件

1. 很简单的页面结构，一个导航条，左边包含四个导航项；右边一个按钮；
2. 比较有意思的是，按钮内部是两个 div 来构成的，用来模拟小叉号的图标；
3. 导航项的构成一般都是 ul>li>a 的结构；

---> 写完基础的页面结构，建议先看一下最原始的页面，然后，就来见证一下 css 的魅力吧！

#### css 文件

1. css 中的类名尽量贴合我们要实现的功能，见名知意；
2. 首先 css 文件中一上来就使用通配符重置了 box-sizing 属性，设置为 border-box;但是我在看《CSS 的世界》这本书中，作者说这种做法其实是不可取的；具体原因大致如下：

- 产生没必要的消耗，因为通配符\*号会选择所有的标签元素，但是对于普通的内联元素（非替换元素）的渲染不受该属性的影响，而且像 input 中的 search 类型本身默认就是 border-box;
- 且 border-box 属性设计的初衷应该就是解决替换元素宽度自适应的问题，所以最好的做法是有针对性的去设置；

```css
input,
textarea,
img,
video,
object {
  box-sizing: border-box;
}
```

当然，在项目中基本也都是直接全局重置了，且很少人会去在意这个点！

在写 CSS 样式的时候，建议看着源码的效果，自己先思考去写一下，再去和源码对

3. 在书中记载了元素的显示和隐藏的各种方式
   在这个案例中 ul 标签采用的是让整个宽度进行变化的方式；
   而对于 ul 里面的每一个标签项采用的是 opacity: 0;的方式；
   为什么这么去做，有什么原因吗？还是说只是展示元素隐藏的方式

#### js 文件

- MDN 官方解释：Element.classList 是一个只读属性，返回一个元素的类属性的实时 DOMTokenList 集合。虽然 element.classList 本身是只读的，但是你可以使用 add() 和 remove() 方法修改它。
- DOMTokenList.toggle():DOMTokenList 接口的 toggle() 方法从列表中删除一个给定的标记 并返回 false 。 如果标记 不存在，则添加并且函数返回 true。
  很神奇的属性和方法！！！

### thinking

1. 之前需要给某个元素动态添加样式的时候，一般想的都是获取这个元素，操控它的 style 或者 class 之类的，现在可以通过 classlist 这个属性和 toggle 这个方法；
2. 还有就是设置元素的动态类时，可以给最外层的容器加一个动态类，通过这个动态类控制里面的各个子元素的属性；这样 js 的判断逻辑就会很简单，样式问题也就交给了 css 去做；

## 2.3D 盒子背景

这个案例实现的效果：
一个背景是动图的 div 盒子，点击按钮后，一下子变成一个一个分割的小方块，可以先运行一下，看一下效果，很炫！！

### 分析源码

#### html

1. 页面结构非常简单，只有一个按钮和 div 构成

#### CSS

见注释

#### js

1. 在 js 文件中动态的创建 4\*4 个小盒子，主要是动态的控制小盒子的 backgroundPosition 的位置；
2. 按钮的点击事件来控制是否启用”big“的样式；

### thinking

1. 在做完第一个案例的时候，在做第二个案例，会发现，它的设计思想是一致的，通过一个标志类来触发一系列的效果；
2. 最大的收获是对于一些动画效果的练习和熟悉

## 3.收缩的卡片

这个案例实现的效果：
点击卡片，可以将其收缩起来，再次点击，卡片即可展开；

### 分析源码

这一次我就先不看源代码，自己看着最后的效果，尝试着实现一下吧！
自己实现起来，遗留了很多问题，然后看一下源码吧！

#### html 文件

1. 首先页面要有一个容器，容器中放五个卡片，每个项目由两部分组成：图片和标题；这里的图片可以作为卡片的背景图片
   ----- 嘿嘿，html 的结构基本没差

#### css 文件

1. 果然，在自己写样式的时候，还是没有太大的思路；在控制动态效果的时候，样式写的不太理想，宽度没有按照自己想的去改变
2. enen~,要养成一上来就重置全局样式的习惯哦！

#### js 文件

2. 在点击的时候，只能给自己当前点击的卡片加上样式，没被点击的卡片的样式不知道怎么去控制；

### thinking

勤能补拙，多多练习，这样的逻辑思维应该就会慢慢积累起来的，至少现在我已经能够写出来一点了，只是样式上写的时候有点毫无章法，但是我一直觉得什么东西都是有章法可寻的，样式也一样！

## 4.进度条

这个案例实现的效果就是：点击上一步/下一步的按钮来控制进度条的一个过程

### 分析源码

#### html

html 的结构大体划分的是一样的，但是在 1234，我用 span 标签又包了一层，好像确实没啥必要，而且我多包了一层，定义样式的时候也会更加麻烦

#### css

样式真的是痛点，写着写着就没思路了

- 通过利用伪类和伪元素来控制一些样式

#### js

源码:

```
if(currentActive > circles.length) {
        currentActive = circles.length
    }
if(currentActive < 1) {
        currentActive = 1
    }
```

我觉得这一块是不需要的，虽然是很保险的方式，但是我的实现方式中当前进度条的位置为终点的时候，下一步的按钮为不可点击的状态，当前进度条为起点的时候，上一步为不可点击的状态，所以，不会出现当前进度条大于终点和小于起点的状况；
我觉得我的实现思路更清晰一点，嘿嘿！

### thinking

- 最大的收获应该就是巧用伪类和伪元素，来达到我们的目的

## 5.隐藏搜索框

这个案例还是比较简单的，点一下隐藏搜索框，再点一下，展示搜索框
感觉跟导航栏动画有点像

### thinking

- 很顺利的实现了，但是我的动态效果不够顺滑
- 比对 html 的结构中，基本一致，搜索按钮的小图标样式我先复制一下了
- 样式文件的逻辑差别很大，我在想我的实现方式不够顺滑，是不是因为弹性布局，宽度需要计算，而且按钮的位置也是需要计算，而源码直接设定宽度，对于按钮的位置使用定位的方式，省了计算，但是我总觉得这样也不是很好
- 还是要多多练习样式的逻辑
- 一个遗留问题，虽然不纠结，我的搜索小图标不显示~~~

## 6.Scroll-animation

加油！
这个案例主要是在浏览器滚动的时候触发的一个动画
这个案例打算先把源码看明白之后自己再来实现

### 分析源码

#### html

- html 的页面结构平平无奇，就是一堆盒子
- 我在调试的时候实现的动画滑动效果一直跟案例不一样，后来才发现我用 container 又包了一层，而它的宽度是子元素撑开的，导致只在它的宽度范围内看到动画效果，将宽度置为 100%后，就发现跟案例的效果一样了

#### js

- 监听浏览器滚动的事件，当触发时，执行盒子动画
- 重点在盒子动画的逻辑上：
  > Element.getBoundingClientRect()返回元素的大小及其相对于视口的位置；
  > window.innerHeight:浏览器的视口的高度，如果有水平滚动条，也包括滚动条的高度；
  > 其实动画实现的逻辑很简单，设置一个触发视口底部的高度值，当盒子相对于视口的 top 值小于这个值的时候，就隐藏，否则就展示；
- 触发高度的设置也是很有意思的，要让用户很明显的感觉到动画效果

#### css

- css 文件的样式也不是很难，肯定要给盒子加一个漂亮的样式，我觉得比较有意思的想法是，盒子的隐藏逻辑，盒子其实是一直存在的，只是在显示的时候沿着 x 轴滑到视线范围内，隐藏的时候沿着 x 轴滑到视线范围外；
- 然后我在想使用 getBoundingClientRect（）来获取元素的位置信息，肯定是要该元素存在在 dom 节点中才可以；
- 还有一个点是所有元素默认给一个动画效果，当利用伪类当节点是奇数的时候在重置一个反方向的动画效果；如果是我，可能直接奇数给一个，偶数给一个，写两个样式（当然，可能只有我会这么笨的去这么做~~）

### thinking

- 我在搭建 HTML 的页面结构时，会习惯性地划分一个个的小方块，但有时候会划分的过于细了，会增加不必要的 dom 结构

## 7.模糊的 loading(blurry-loading)

这个案例实现的效果是一个加载中的效果，通过百分比从 0~99,背景图片由模糊变清晰的过程；

### thinking

- 计算比例的函数，以后项目中如果有遇到，可以直接利用
- filter：CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染.有好几种函数：
  blur(): 高斯模糊；

- css 文件中，源码是将背景图片的元素脱离文档流，降低图层来实现的；而我是将文本内容和背景图片当做一个整体，一起调整其位置，没有脱离文档流；

## 8.Split Landing Page

这个案例的效果：当鼠标悬浮的时候触发响应的样式；看到效果的第一反应是伪类（以前伪类对我来讲是非常神秘的所在）

### thinking

- 我记得之前有说<h1>标签在页面里最好只有一个，所以最好还是不要用多个<h1>,为了更好的语义化；

- 源码应该是 js 和 css 结合使用的，但是我只用了 css 就实现了同样的效果；而且我感觉源码的逻辑和各种定位写的反而没有那么好理解；
- 在实现背景图片的叠加时，源码是通过伪元素来控制的，我是利用 background-image 属性通过逗号分割来实现的，但是这个属性不能直接写颜色值，要利用渐变来实现，我刚开始就是只写了颜色值，结果导致这个属性在渲染的时候直接失效；
- 参照源码时，有一个比较好的点就是将自己样式中频繁使用的一些样式提取出来，比如说颜色值定义为变量，还有动画的时长等等；
  这个案例我还是比较喜欢的，~~~

## 9.form-input-wave

案例效果是一个登录的表单，给 input 的 label 添加的一个动画效果；

### thinking

- 通过动态添加元素的方式，然后利用伪类来控制元素样式的触发时机，且在动态添加的元素上的动画延迟时间，从而让每一个元素的动画效果有一个时间差；这个思维 very very good!

- 还有就是避免滥用 flex 布局，不需要每一个容器都指定

- transition 的主要的几种效果：
  linear:线性，相同的速度曲线；
  ease：慢速开始，变快，慢速结束；
  ease-in：慢速开始
  ease-out: 慢速结束
  ease-in-out： 慢速开始，慢速结束
  cubic-bezier(0.68, -0.55, 0.265, 1.55)：比较常用的来回缓冲的过渡效果

## 10.faq-collapse

案例效果：

1. 页面初始展示五个常见问题，默认第一个展开；
2. 每一个问题由单独的卡片构成，点击卡片的右边按钮，进行折叠或者展开；

### thinking

- 引入字体图标的样式文件，之前我都是直接拷贝，没去想过，后来搜了一下，才发现引入的这个样式文件是字体图标的样式文件，而且我直接复制官网的地址，加载速度也快了很多，可以查阅官网，引入你想用的字体图标样式；
- 卡片的布局有些差异，代表着我和源码的样式肯定思路不太一样，我有时候觉得这就是开发的魅力所在，每个人的思路都不一样，但是却能实现同一个样式；

## 11.random-choice-picker

这个案例应该主要考察的是 js;

- 在页面的输入框中输入每一个选项的内容，用逗号分割；
- 在输入的过程中会在输入框的下面生成你的选项；
- 当输入回车键的时候，会在你的选项中随机跳跃，随机选中一个选项；

### thinking

- 我的随机跳跃一直实现不了
- 看了源码之后大概理解应该是利用定时器来打时间差，而且要注意一个地方就是 setTimeout/setInterval 第一个参数一定要是函数啊，我就是传参数直接传了，相当于函数执行，一直走不通；

## 12.incrementing-counter

这个案例效果就是：

- 页面加载的时候三组数据有一个动态递增的效果；
  ps：希望在上个例子的影响下，这个例子我可以搞定；

### thinking

- 同时开始和同时停止可以实现了，但是最后计数值却差不多相等~~~；
- 我的思路是保持同一个增量，不同的时间频率；而源码是同一个时间频率，但是增量不同，good

## 13.Drink Water

这个案例的效果让我想起了一款 App 时光序,可以记录喝水的模块，跟这个案例的效果就很像；

- 在页面下面有几个模仿杯子的小容器，当点击小容器的时候，我们设置的喝水的目标就会发生变化；
- 还有一个小点就是，水杯必须按顺序点击，如果你是直接点击第二个，那么将相当于点击了第一个和第二个；

### thinking

- 大体效果实现了，但是我的效果有个问题就是点击了水杯就不能取消了；

- 这个案例有很多小细节需要去思考，比如说容器的目标值的设定，高度的变化等等；
- .nextElementSibling 返回当前元素在其父元素的子元素节点中的后一个元素节点,如果该元素已经是最后一个元素节点,则返回 null,该属性是只读的.

## 14.background-slider

这个案例的效果：

- 总共需要五张图片大概实现一个幻灯片的效果，点击左右按钮实现图片的切换
- 不一样的地方就是图片切换的时候，背景图片也会随着切换

### thinking

- 心情不 nice 的时候，各方面都是不满意的

## 15.theme-clock

- 模仿现实生活中的时钟的一个案例效果；点击按钮可以切换一个主题；
- 整个表盘的由时分秒三根表针组成，时针和分针的位置是需要计算的，秒针的行动大概有个时间周期；
- 秒针行动到终点是，会逆时针旋转到起点（虽然起点和终点是一个）
- 下面的文字表示分钟是在秒针走到终点的时候一起变换的

### thinking

- 很粗糙的完成了这个案例，。。。。。

## 16.三栏布局——圣杯布局
## 17.三栏布局——双飞翼布局