​

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

 

 

 

 

 

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

 
 

 
 

 
 

 
 

 
 

 
 

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

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

点击上一页的实现：

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

总结

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













。