背景介绍：本人学前端断断续续一年半了，但总时间加起来不到一个月———一开始从b站跟着视频敲代码，后面看3wschool，ES6书，利扣刷题，掘金看帖子，蓝桥杯备赛网站刷题。每个方法途径都进行过初级尝试，但是敲的代码量少，对知识点的掌握情况不牢固。比赛前没有把所有知识点复习完，心想把html、css、js简单的做出来就心满意足了，所以接下来只对三件套的部分进行复盘。欢迎各位指点，分享学习经验！
第一题和第二题都不难，但是没记住属性就写不出，我发现自己学习过程中很多细节和扩展没有想到。 1. 横放三div,一开始三个div高度不一致，左右两个div宽度固定，但是中间的div宽度没有全占满。要求实现高度一致，中间div的宽度等于全屏-左右的div宽度和margin。难住我的是怎么实现中间div的宽度等于全屏-左右的div宽度和margin。 2. 元素的隐藏显示切换。难住我的是有一个类的元素要实现前4个类的元素隐藏，但是最后一个该类的元素要显示，本质是对getElementsByClass获取到的数据结构不熟悉。 3. 实现一个随机生成6位验证码，难住我的是虽然知道用Math.random(),但是不知道如何随机生成一位数，核心就是不知道Math.floor()。 4. 对象数组的增删改，PS的界面，实现对图层的上移和下移，删除（当只剩一个图层时不删除）,基本操作都实现了，但是难住的是有限制的时候无法实现，如当只剩一个图层时不删除，上移下移遇到极端情况会有问题，第一个元素上移，和最后一个元素下移。因为在图层的有序列表中，是生成一个新图层就会创建一个图层对象存在数组里面，但是在界面中显示的数组和实际图层列表是两个，我该创建一个显示列表，用来存放顺序吗，这是一个问题。
前三题目前已经得到解决，回来就搜索了答案。
- 第一题考的 是flex布局和calc()方法，calc()动态计算长度值，中间div的宽度设置为
calc(100% - totalwith px)，就可以解决固定两边div的宽度，中间的div就可以实现动态变化了。注意减号旁边要有空格。 - getElementsByClass获取到的数据返回的是 HTMLCollection，虽然不是数组但可以遍历：
const buttons = document.getElementsByClassName('btn');
buttons[4].addEventListener('click', function () {
for (let i = 0; i < 4; i++) {
buttons[i].style.display = 'none'; } });
或者使用querySelectorAll()方法，获取的数据返回的是数组，就自然而然可以用遍历了。我在考试的时候一直想要用document.querySelectAll('.btn').style.display='none'。误区在于，只有单个元素才能设置style，获取到的数据是一个集合，但当时我又不知道是一个数组，而是在用
for(let i =0;i<4;i++){ buttons.style.display='none'}
- Math.floor()取地板数：Math.random()取的是0-1的数值，生成一个随机数
Math.floor(Math.random()*10)，生成一个随机数会了，那生成6个随机数就用字符串的方法将每一个随机数连接起来，因此这道题目解：
let code = ' ';
for(let i =0;i<6;i++){
code += Math.floor(Math.random()*10)}
这三个问题解决了，我想要加固一下，写一个融合的页面： 题目1的效果：
题目2的效果：
生成验证码的效果：
html代码：code.juejin.cn/api/raw/749…
css代码：code.juejin.cn/api/raw/749…
js代码：code.juejin.cn/api/raw/749…
第一次发掘金文章，本篇制作用时约90分钟，感谢观看！欢迎交流想法！
