标签：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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。