​

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）下的五个数据

 

 

 

 

 

 
，这点只需要判断完当前页数
 

 

 

 

 

 

 ，把当前页数前面的所有数据不拿就行
 

 
 

 
 

 
 

 
 

 
 

 
 
。本题代码补全具体如下：

初始化页面时请求一次第一页数据：

点击上一页的实现：

点击下一页的实现（和点击上一页几乎一样）：

总结

十个题目的难度不大             ，虽然都实现了但代码写的自我感觉其实不太满意












。