【蓝桥杯真题】当蓝桥杯开设Web组之后,对几题能拿省一?

目录 🏆难度分析 🏆一、水果拼盘 🏆二、展开你的扇子 &#x1…

目录

🏆难度分析

🏆一、水果拼盘

🏆二、展开你的扇子

🏆三、和手机相处的时光

🏆四、灯的颜色变化

🏆五、冬奥大抽奖

🏆六、蓝桥知识网

🏆七、布局切换

🏆八、购物车

🏆九、寻找小狼人

🏆十、课程列表

🏆结束语


🏆难度分析

这是蓝桥杯第一年开设web开发组,我记得当时蓝桥杯组委会在开会时就说过,因为现在不知道广大同学们的真实web水平,本次省赛会比较简单,来试试大家的真实水平,再后续的国赛就会提高难度;

所以我们可以看到,这次省赛的题目都非常基础,我也是有幸混了一个省一:

当然,我也没有将所有的题目都写得很完美,所以我在一等奖中是排在中后位的,下面我们一起来看看题目,好好复盘一下本次比赛;


🏆一、水果拼盘

介绍:

目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方案,本题可以使用 Flex 属性快速完成布局。

分析:第一题考察flex布局,我们改一下排列的方向,并允许换行,秒掉;


🏆二、展开你的扇子

介绍

网站上为了让内容显示不臃肿, 我们可以做一个折叠展开的效果。本题将使用 CSS3 实现元素呈扇形展开的效果。

页面上有 12 个相同大小的 div 元素

12 div 元素具有不同的背景颜色

6 div 元素 (id="item1"~id="item6")均为逆时针转动,其最 小转动的角度为 10 deg,相邻元素间的角度差为 10 deg

6 div 元素 (id="item7"~id="item12")均为顺时针转动,其最 小转动的角度为 10 deg,相邻元素间的角度差为 10 deg

注意,元素 6 (id="item6")和元素 7 (id="item7"),各自反方向转 10 deg,所以它们之间的角度差为 20 deg

这题考察伪类:hover的使用,再用transform实现旋转就行;


🏆三、和手机相处的时光

介绍

现在都提倡健康使用手机, 那么统计一下在一周中每天使用手机的情况吧! 本题使用 ECharts 实现统计手机使用时长的折线图,但是代码中存在 Bug 需要你去修复。

用折线图显示了一周当中,每天使用手机的时长

index.html 文件里 var option = {} 中的内容是 ECharts 的配置

,该配置中存在 Bug, 导致坐标轴显示不正确

在配置项中, title 是用于设置折线图的标题

在配置项中, series 是系列,其中的 data 是一周中每天使用手机的时间 数据, type 是图表的类型为折线图。

这个题可能是一个脑筋急转弯,他把横轴和竖轴放反了;


🏆四、灯的颜色变化

介绍

我们经常会看到各种颜色的灯光,本题我们将实现一个颜色会变化的灯的效果。

动态效果

目标

完成 js/trafficlights.js 文件中的 red、 green 和 trafficlights 函数,达 到以下效果:

1. 页面加载完成 3 秒后灯的颜色变成红色。

2. 在灯的颜色变成红色的 3 秒后,灯的颜色变成绿色(即 6 秒后灯光变成绿 色)。

3. 随后颜色不再变化。

4. 请通过修改 display属性来显示不同颜色的灯的图片。

这题无非是控制DOM节点,然后用定时器控制事件;


🏆五、冬奥大抽奖

介绍

蓝桥云课庆冬奥需要举行一次抽奖活动,我们一起做一个页面提供给云课冬奥抽奖活动使用。

动态效果
​​​​

目标

找到 index.js 中 rolling 函数,使用 jQuery 或者 js 完善此函数,达到以下效 果:

1. 选击开始后,以 class 为 li1 的元素为起选,黄色背景 (.active 类) 在奖项上顺时针转动。

2. 当转动停止后,将获奖提示显示到页面的 id 为 award 元素中。获奖提示 必须包含奖项的名称, 该名称需与题目提供的名称完全一致。

3. 转动时间间隔和转动停止条件已给出,请勿修改。

这个题。。需要通过id来控制转动,然后用innerHTML写入文本;


🏆六、蓝桥知识网

介绍

蓝桥为了帮助大家学冬,开发了一个知识汇总网站,现在想设计一个简单美观的首页。本题请根据要求来完成一个首页布局。

请根据 mark.png 图片上的参数标注,补充 css/style.css index.html 文件 中的代码。对于 mark.png 上未标注的参数,请结合效果图自行调整

页面版心宽度为 1024px,请保证版心居中,让页面呈现如下图所示的效果:

这个题,明人不说暗话,没有写完,不晓得给没给分数。。。大家自己写一下就行,只是考察你写页面的能力;


🏆七、布局切换

介绍

经常用手机购物的同学或许见过这种功能,在浏览商品列表的时候,我们通过选击一 个小小的按钮图标,就能快速将数据列表在大图(通常是两列)和列表两种布局间来回切换。

本题需要在已提供的基础项目中使用 Vue 2.x 知识,实现切换商品列表布局的功能。

这个题考察vue2的基础知识,就看你v-if和v-for指令熟不熟了;


🏆八、购物车

介绍

网上购物已经成为现代制生活中不可或缺的一部分,那么制们最常用到的购物车功能 又是如何实现的呢?

本题需要在已提供的基础项目中,使用 Vue 2.x 的知识, 解决购物车商品管理过程中遇到的问题。

当前出现的问题是:

· "商品列表"中选击 N "加入购物车"按钮,会在购物车列表中出现

N 个该商品,且初始数量为 1

· "购物车"中选击商品数据后的加号("+")按钮,会在购物车列表中

重复出现该商品,且初始数量为 1

· "购物车"中选击商品数据后的减号("-")按钮,并未将商品从购物

车中移出

这个题,就看你对vue数据的处理了;


🏆九、寻找小狼人

介绍

"狼制杀"是一款多制参与的策略类桌面游戏。本题我们一起完成一个简易的狼制杀 游戏,让我们找到其中的狼制。

目标

在本题 index.html 已经给出的数组中, 我们可以通过数组的 filter 方法: cardList.filter((item) => item.category == "werewolf") 返回一个都 是狼制的新数组。但是技术其管为了考验大家的技术,规定了在代码中任何地方都不 能出现 filter 关键字。所以我们需要封装一个 myarray 方法来实现类似数组 filter 的功能。

1. 狼制比较狡猾,筛选狼制的条件可能会变化,例如 item.name,请实现一 个通用的方法。

2. 完成封装后, 页面效果会自动完成, 效果见文件夹下 effect.gif (请使 用 VS Code 或者浏览器打开 gif 图片)。

我们只需要创建一个新数组,然后遍历this,将this里的每一个对象传入传进myarray方法的回调函数cb( 即(item) => item.category == "werewolf")中,由cb进行判断是否符合条件,如果符合我们就将这个对象数据加入到我们创建的新数组中,最最最后我们将新数组return返回即可


🏆十、课程列表

介绍

分页是前端页面中必不可少的一项功能,下面让我们一起来完成一个课程列表的分页吧。


🏆结束语

本次复盘就到这里结束了!!!你们觉得这种难度的题第几个能拿省一呢?

本文来自网络,不代表软粉网立场,转载请注明出处:https://www.rfff.net/p/1036.html

作者: HUI

发表评论

您的电子邮箱地址不会被公开。

返回顶部