当前位置: 首页> 文旅> 酒店 > 动态网站的技术有_福州小程序开发公司列表_数据分析师证书_微信小程序排名关键词优化

动态网站的技术有_福州小程序开发公司列表_数据分析师证书_微信小程序排名关键词优化

时间:2025/7/12 6:53:14来源:https://blog.csdn.net/s1316339343/article/details/146371192 浏览次数:0次
动态网站的技术有_福州小程序开发公司列表_数据分析师证书_微信小程序排名关键词优化

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


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

本题目为:备赛蓝桥杯之第十六届模拟赛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

 如此便完成了,


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

长路漫漫,我们还需努力!

 

 

关键字:动态网站的技术有_福州小程序开发公司列表_数据分析师证书_微信小程序排名关键词优化

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: