2022.4.9第十三届蓝桥杯web组个人题解
作者：互联网
2022第十三届蓝桥杯第一次开放了web组赛道，博主作为一名前端小白，参加了这次比赛。一共十个题目，目的均是实现特定的网页效果，考点包含三件套、jQuery和vue，这里简单的进行一下个人的题解记录。
目录
01 水果拼盘（5分）
02 展开你的扇子（5分）
03 和手机相处的时光（10分）
04 灯的颜色变化（10分）
05 冬奥大抽奖（15分）
06 蓝桥知识网（15分）
07 布局切换（20分）
08 购物车（20分）
09 寻找小狼人（25分）
10 课程列表（25分）
总结
01 水果拼盘（5分）
题目简要介绍：
初始效果：
目标：
目标效果：
解题方式：所有十五个水果的父盒子采用的是flex布局，直接设置flex-flow属性即可。如下图所示：
02 展开你的扇子（5分）
题目简要介绍：
初始效果：
目标：
目标效果：
解题方式：给每个div设置transform: rotate();属性即可。大致可参照下图：
03 和手机相处的时光（10分）
题目简要介绍：
初始效果：
目标：
解题方式：x坐标轴和y坐标轴字段交换一下，然后改下字段下的属性就行。修改后如下图所示：
04 灯的颜色变化（10分）
题目简要介绍：
初始效果：
目标：
目标效果：
解题方式：通过js修改display属性控制显示和隐藏，然后设个延时器即可。如下图所示：
05 冬奥大抽奖（15分）
题目简要介绍：
初始效果：
目标：
目标效果：
解题方式：使用jQuery的addClass和removeClass即可，抽奖结束后设置一下text()，如下图所示：
06 蓝桥知识网（15分）
题目简要介绍：
初始效果：无，本题目标是复刻一个静态页面。
目标：
目标效果：
解题方式：这题是复刻静态页面，不需多说，设置好版心区，然后分别设置网页的top区、middle区和bottom区，往对应区添加东西就行。
07 布局切换（20分）
题目简要介绍：
初始效果：
目标：
目标效果：
解题方式：这题开始和vue相关，只需要在mounted下请求一下goodsList数据，然后给大图图标和列表图标绑定一下onclick方法就行。（本来vue不建议直接操纵DOM元素，不过我还是这么做了）如下图所示：
08 购物车（20分）
题目简要介绍：
初始问题：
目标：
目标效果：
解题方式：加入购物车前检查一下购物车有没有当前商品，将商品数量减少到0的时候在购物车数组中移除（splice）当前商品就可以，如下图所示：
09 寻找小狼人（25分）
题目简要介绍：
初始效果：
目标：
目标效果：
解题方式：简单来说就是自己实现数组的filter方法，这倒是我第一次实现该方法，本来都要忘记filter方法了。我个人觉得，这个实现方式稍显精妙。如下图所示：
10 课程列表（25分）
题目简要介绍：
初始效果：
目标：
目标效果：
解题方式：初始请求一下第一页的五个数据，然后上一页/下一页就请求当前页数（pageNum）下的五个数据，这点只需要判断完当前页数，把当前页数前面的所有数据不拿就行。本题代码补全具体如下：
初始化页面时请求一次第一页数据：
点击上一页的实现：
点击下一页的实现（和点击上一页几乎一样）：
总结
十个题目的难度不大，虽然都实现了但代码写的自我感觉其实不太满意。
标签：web,简要,题目,效果,题解,目标,蓝桥,解题,初始 来源： https://www.cnblogs.com/detailNew/p/16127338.html