备赛蓝桥杯之第十六届模拟赛3期职业院校组

提示：本篇文章仅仅是作者自己目前在备赛蓝桥杯中，自己学习与刷题的学习笔记，写的不好，欢迎大家批评与建议

由于个别题目代码量与题目量偏大，请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题，在这里只提供部分原题代码

本题目为：备赛蓝桥杯之第十六届模拟赛3期职业院校组

第十六届蓝桥杯（Web 应用开发）模拟赛 3 期-职业组 - 蓝桥云课

题目1：跨屏变形记

需要考生作答的代码段如下：

/* TODO:请补充代码 *//* TODO:END */

题目要求：

请使用 CSS 的媒体查询功能，为页面实现移动端布局，具体实现如下：

页面宽度小于 768px 时，页面样式如下：
轮播图（id="banner"）与新闻（id="news"）上下排列分布，都独占一行，且宽度填充满整个页面。
轮播图（id="banner"）与新闻（id="news"）之间间隔 45px。

答案：

@media(max-width: 768px) {#container {flex-direction: column;}#banner {margin-bottom: 45px;width: 100%;}#news {width: 100%;}
}

本题作者想说

本题主要考察的知识：

1.css

2.css的媒体查询

CSS的媒体查询（Media Queries）是CSS3引入的一个非常有用的特性，它允许你根据不同的媒体类型（如屏幕、打印等）和特定的条件（如屏幕宽度、分辨率等）来应用不同的样式规则。这样，你可以为不同的设备或环境编写特定的CSS代码，从而实现响应式设计。

媒体查询的基本语法如下：

@media not|only mediatype and (expressions) {CSS-Code;
}

not：排除某种媒体类型。

only：指定某种媒体类型，防止旧浏览器不支持带媒体查询的样式时应用到所有设备。

mediatype：媒体类型，如screen（屏幕）、print（打印）等。

expressions：一个或多个表达式，用于测试特定的条件，如屏幕宽度、高度、分辨率等。

本题要求对于“页面宽度小于 768px 时”对页面中的元素进行调整，那么首先要用@media(max-width: 768px)进行限制，此处我们设置当页面最大宽度为768px时，也就是小于768px时，对下列元素进行css设置

轮播图（id="banner"）与新闻（id="news"）上下排列分布，都独占一行，且宽度填充满整个页面。
轮播图（id="banner"）与新闻（id="news"）之间间隔 45px。

此处各个元素都是由id进行定义的，所以用css时要用“#”才可以，上下排布独占一行，可以使用flex布局中的横轴与交叉轴的定义，对页面中元素进行纵向排布，flex-direction: column;宽度占满整个页面，则是子元素的设置，我们需要将子元素的id单独拿出来进行css定义，并设置 width: 100%;要求轮播图与新闻之间间隔45px，我们则采用外边距的方式将二者隔开margin-bottom: 45px;最后结果如此

本题的判题程序可能出现问题，因此有些能实现效果的代码也有可能不通过

题目2：垃圾分类

需要考生作答的代码段如下：

        const garbagesorting = () => {// TODO：待补充代码};

题目要求：

完善 index.html 中的 garbagesorting 方法。

点击一键分类，把垃圾 waste 中的数据中的 txt 根据分类 type 依次放到对应的数组，对应的数组如下：
let food_waste = ref([]); //厨余垃圾
let recyclable_waste = ref([]); //可回收垃圾
let other_waste = ref([]); //其他垃圾
let harmful_waste = ref([]); //有害垃圾。
如 food_waste 最后的结果是 ["剩菜剩饭", "骨头", "菜根菜叶"]。

答案：

        const garbagesorting = () => {// TODO：待补充代码waste.value.forEach(({type,txt})=>({厨余垃圾:food_waste,可回收垃圾:recyclable_waste,其他垃圾:other_waste,有害垃圾:harmful_waste})[type].value.push(txt))};

本题作者想说

本题主要考察的知识：

主要将已存在的数组按数组内部的属性进行再分类

本题主要是要求我们对waste中的垃圾属性，按照垃圾类型一对一进行分类，既然涉及到了“一对一”那我们首先要想到循环遍历，也就是将数组一个一个进行定义（forEach）

forEach 是 JavaScript 中数组的一个方法，用于对数组的每个元素执行一次提供的函数。它不会改变原数组，也不会返回任何值（即返回 undefined）。

以下是 forEach 方法的基本语法：

array.forEach(function(currentValue, index, arr), thisValue)

currentValue：当前正在处理的数组元素。

index（可选）：当前正在处理的数组元素的索引。

arr（可选）：正在被遍历的数组本身。

thisValue（可选）：执行回调函数时用作 this 的值。

这个语法其实没什么难的，最主要的就是要明白你要对那个进行循环操作，在本题中，我要对waste数组中的type与txt进行循环，这样我们就要把这两个属性，作为一个整体的对象在foreach中展示

waste.value.forEach(({type,txt})=>()
)

如此，我们明白了要把什么循环，之后就要考虑对要循环的东西怎么循环，根据题意，题目中已经把各个类型垃圾都已经做好了定义，那么我们要做的就是把该属于这类的垃圾与watse中乱序的垃圾分类进行一一的映射，并根据类型的值将watse中的txt推送到其中

一一映射：在一一对应时，注意“，”的使用

              厨余垃圾:food_waste,可回收垃圾:recyclable_waste,其他垃圾:other_waste,有害垃圾:harmful_waste

根据类型（[type]）的值（.value）将watse中的txt推送到其中（.push(txt) ）最后结果如此

因此题的{}与（）过于多，所以需要答题者一定要注意foreach用到的符号与自己定义的对象符号，不要搞混

题目3：神奇的滤镜

需要考生作答的代码段如下：

filterTrigger.forEach(trigger => {// TODO：待补充代码});

题目要求：

请在 js/index.js 文件中的 TODO 部分补充代码实现需求，变量 filterTrigger 为所有滤镜复选框元素。为复选框 .Header input 绑定选择事件，当选择某个复选框时，会弹出对应的滤镜效果的弹窗（class="Filter"）。当选择多个复选框时，滤镜会进行叠加，通过调用以提供的 updateZIndex 函数将后选择的滤镜覆盖在最上层。

例如：当勾选页面中 data-filter-name="brightness" 对应的复选框时，与其对应的滤镜弹窗（class="Filter" data-filter-name="brightness")将显示在页面中（注意，只能通过修改 display 属性控制其显隐）。

答案：

filterTrigger.forEach(trigger => {// TODO：待补充代码document.querySelector('header').onchange = ({target}) => {filterTrigger.forEach((trigger,id) => {filters[id].style.display = trigger.checked ? 'block' : 'none'if(trigger===trigger){updateZIndex(filters[id])}})}
});

本题作者想说

本题主要考察的知识：

利用js寻找改变的元素，并利用循环遍历与监听器，持续不断的判断状态以达到内部属性的改变

本题的代码过于冗杂，这便更考到我们理解代码的能力，首先我们要清楚filterTrigger 为控制所有滤镜框的复选框元素，我们要做到当点击页面头部的选项时，滤镜框的复选框同时被选择，同时可以显示滤镜框，trigger代表在循环时滤镜框的另一种代指，滤镜效果的弹窗（class="Filter"）即表示滤镜框，但是值得注意的上述代码const filters = document.querySelectorAll('.Filter');已经将.Filter变成了filters，所以filters为滤镜框

首先找到页面头部的复选框是否被选中，并添加一个监听器，使随时可以监听是否选择

  document.querySelector('header').onchange = ({target})

这里target代表头部复选框的另一种代指，之后我们首先有了前提条件复选框的控制选项，之后通过复选框选项再次循环对滤镜框的复选框元素

=> {filterTrigger.forEach((trigger,id) => {}

与之前不同的是，我们把id也传入进去，这样编程就知道了谁被选择了，之后我们就可以根据id将滤镜框展示出来，另外多个展示框展示时，题目有明确要求使用updateZIndex（）函数放置上层

      filters[id].style.display = trigger.checked ? 'block' : 'none'if(trigger===trigger){updateZIndex(filters[id])}})

如此便完成了

本题难点就难在了一层层的套环，一层层数据的传递

题目4：解密工具

需要考生作答的代码段如下：

function getPossiblePasswords(max, count) { // TODO: 待补充代码  }

题目要求：

完善 js/index.js 中的 getPossiblePasswords 函数，该函数接受两个参数：

max：密码数组中的最大数字
count：密码数组的长度

该方法返回值为一个二维数组，里面包含所有的可能解密的数组。解密的数组从1开始，无需考虑二维数组中包含的数组顺序以及密码数组中数字的顺序。即[[2,4],[3,4]]跟[[4,3],[4,2]] 是一样的。

答案：

function getPossiblePasswords(max, count) {// TODO: 待补充代码  const resultArr = []const handleArr = (start, res) => { if (res.length == count) {resultArr.push([...res])return}for (let i = start; i <= max; i++) { res.push(i)handleArr(i + 1, res) res.pop() }}handleArr(1, [])return resultArr
}

本题作者想说

本题主要考察的知识：

通过两个数字的限制，生成符合排列组合的二维数组

本题其实就是让答题人限制最大数与数组的个数，生成符合个数且最大数不超过限定的最大数的排列组合数组

定义一个数组用来存放最后的数组 const resultArr = []

之后我们再定义一个处理数组的方法，传入start和res，start表示当前排列组合的起始数字，res是一个数组，用于存储当前的排列组合。

const handleArr = (start, res) => {}

如果res数组的长度等于count，则将res数组的副本推入resultArr数组中，并返回

if (res.length == count) {resultArr.push([...res])return
}

函数通过一个for循环遍历从start到max的所有整数，对于每个整数i，将其推入res数组，然后递归调用handleArr函数，传入i + 1作为新的start值，递归调用后，将res数组的最后一个元素弹出，以便尝试下一个可能的排列组合

for (let i = start; i <= max; i++) { res.push(i)handleArr(i + 1, res) res.pop() 
}

之后我们用这个函数将1与空数组【】传入，在处理之后，返回最后的数组

    handleArr(1, [])return resultArr

如此便完成了，

感谢观看此篇文章，谢谢大家的支持，本片文章只是我自己学习的历程，有些写的不好地方欢迎大家交流改动。

长路漫漫，我们还需努力！