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）下的五个数据，这点只需要判断完当前页数，把当前页数前面的所有数据不拿就行。本题代码补全具体如下：
初始化页面时请求一次第一页数据：
点击上一页的实现：
点击下一页的实现（和点击上一页几乎一样）：
总结
十个题目的难度不大，虽然都实现了但代码写的自我感觉其实不太满意。
2022.4.9第十三届蓝桥杯web组省赛个人题解相关推荐
- 2022第十三届蓝桥杯JAVAB组省赛总结
2022年第十三届蓝桥杯JAVAB组省赛 蓝桥杯准备了好久,毕竟学校还是认可,如果能进国赛还能有保研加分. 今年真是可惜了,题太难了,从去年买了Acwing的课,一直在学,没想到到最后是这么个情况. ...
- 十三届蓝桥杯单片机组省赛真题程序解析
第一次参加蓝桥杯,线上比赛,记录一下 比赛刚开始了十分钟才做上客观题,做上了之后才发现看一次题警告一次,当时就蚌埠住了,随便做了做就交了,手册也没怎么查(查一下直接给了3次黄牌,就没敢查了)其实老师1 ...
- 2022第十三届蓝桥杯web组题解
文章目录 01水果拼盘 题目 解答 02展开你的扇子 题目 解答 03和手机相处的时光 题目 解答 04灯的颜色变化 题目 解答 05冬奥大抽奖 题目 解答 06蓝桥知识网 题目 解答 07布局切换 ...
- 第十三届蓝桥杯A组省赛填空程序真题集
文章目录 试题 A: 裁纸刀(填空) 试题 B: 寻找整数(填空) 试题 C: 求和 试题 D: GCD 试题 E: 蜂巢 试题 F: 全排列的价值 试题 G: 青蛙过河 试题 H: 因数平方和 试题 ...
- 第十三届蓝桥杯JavaB组国赛H题——修路 （AC）
目录 1.修路 1.问题描述 2.输入格式 3.输出格式 4.样例输入 5.样例输出 6.数据范围 7.原题链接 2.解题思路 3.Ac_code 1.修路 1.问题描述 这天, 小明在修路. 他需要 ...
- 第十三届蓝桥杯JavaB组省赛F题——最大子矩阵 (AC)
目录 1.最大子矩阵 1.问题描述 2.输入格式 3.输出格式 4.样例输入 5.样例输出 6.数据范围 7.原题链接 2.解题思路 3.Ac_code 1.最大子矩阵 1.问题描述 小明有一个大小为 ...
- (图解)第十三届蓝桥杯B组省赛 试题 G: 积木画
试题 G: 积木画 [问题描述] 小明最近迷上了积木画,有这么两种类型的积木,分别为 I 型(大小为 2 个单位面积)和 L 型(大小为 3 个单位面积): 同时,小明有一块面积大小为 2 × N 的 ...
- 第十四届蓝桥杯cb组省赛个人题解
试题 C: 冶炼金属 时间限制: 1.0s 内存限制: 256.0MB 本题总分:10 分 [问题描述] 小蓝有一个神奇的炉子用于将普通金属 O 冶炼成为一种特殊金属 X.这个 炉子有一个称作 ...
- 2022年第十三届蓝桥杯大赛软件省赛Java学B组试题
第十三届蓝桥杯大赛软件省赛Java学B组试题 一.试题截图 1. 星期计算 这道题是可以直接用笔算起来的,我算出来的答案是5,(2022整除7 余6,六天后就是星期五)但目前官方答案还不知道是什么? ...
最新文章
- CF A. DZY Loves Hash
- 突发！HashiCorp禁止在中国使用企业版VAULT软件
- Node环境的配置与安装（windows系统）（超详细）
- [js] json和对象有什么区别？
- 从蚂蚁金服实践入手，带你深入了解 Service Mesh
- 飞控计算机的作用,用于波音777飞机的主要飞控计算机
- 打印多项式的那些坑（洛谷P1067题题解，Java语言描述）
- 【转载】嫁给程序员的十大好处。。
- yaml文件解析：c++篇
- python信号处理教程_PhysioNet生理信号处理（五）--WFDB for Python(DEMO)
- python离散化方法_python中字符串离散化的例子
- vs code 问题：preLaunchTask“build”已终止,退出代码为 1。解决办法
- matlab遗传算法 系统辨识,基于遗传算法的控制系统的系统辨识
- Linux内核中获取虚拟机KVM结构体信息以及vCPU个数
- kali：hydra破解ssh密码
- Mac外接显示器默认30hz
- staring mysql_mysql启动错误：Starting MySQL.. ERROR! The server quit without updating PID file错误...
- 惠普笔记本通过系统如何进入BIOS？
- 为什么角膜塑形镜的价格比隐形眼镜贵这么多？
- mysql忘记初始密码与更改密码