【蓝桥杯Web】第十四届蓝桥杯（Web 应用开发）模拟赛 - 大学组
前言
本章内容主要讲解第十四届蓝桥杯（Web 应用开发）模拟赛 -大学组中职业组里没有写道过的题目，真题地址放于文章最下方了。接着往下看吧
文章目录
目录
前言
文章目录
第一题：渐变色背景生成器
第二题：梅楼封的一天
第三题：芝麻开门
第四题：宝贵的一票
第五题：平地起高楼
结语
真题地址
第一题：渐变色背景生成器
题目要求：
解题思路：
题目中的调色盘的两个颜色值都使用了 CSS 自定义属性。那么我们如何将上方文本框颜色值赋值给相应的CSS自定义属性值呢？不要慌，题目中给出了提示：
可以使用第三条，修改一个dom上的css变量，从而实现要求。其中“--my-var”是CSS自定义变量的名字，jsVar+4代表要赋予的值，element是被修改的dom节点。
const inputs = document.querySelectorAll(".controls input");
/**
* 上面已经选取了两个取色器
* 请添加相应的 JS 事件处理函数并绑定到合适的事件监听器上（提示：change 事件）
* 这样我们就可以用取色器选取颜色来生成下方的渐变色背景啦
* */
var gradient=document.querySelector('.gradient')
inputs[0].addEventListener('change',function(){
gradient.style.setProperty("--color1", inputs[0].value);
})
inputs[1].addEventListener('change',function(){
gradient.style.setProperty("--color2", inputs[1].value);
})第二题：梅楼封的一天
题目要求：
解题思路：
- 要求一和要求二很简单直接写判断条件并返回相应的值就可以了。
- 要求三相对比较复杂，因为规则可能是一个字符串，也可能是多个字符串以数组的形式传入。所以我们要判断如果传入的规则是数组的话应该如何？不是数组的话应该如何？(具体写法写在代码注释里了)
- 要求四就是一个号码的替换，将一个正常的号码替换成，保留三个和后三个中间五个是*号的样子，懂replace中的$符号，就会很简单。
/**
* @description:
* @param {*} str
* @param {*} rule
* @param {*} symbol
* @param {*} dealPhone
* @return {*}
*/
const toDesensitization = (str, rule, symbol = "*", dealPhone = true) => {
//要求一: str不存在返回null
if(!str)return null;
//要求二: str存在rule不存在返回str
if(!rule)return str;
const resData={
"ids": [],
"newStr": ""
}
//要求三: 查找str中存在的rule字符并替换成*
//新建匹配规则，如果rule是数组，那么将数组转为以|拼接的字符串，如果不是数组(就是单独的一个字符串)
rule = Array.isArray(rule) ? new RegExp(rule.join('|'),'g') : new RegExp(rule,'g')
//利用replace匹配正则表达式的模式，替换成*号。注意：匹配的字符串长度为几那么就返回几个连续的*。使用str.repeat（n）函数实现，repeat用于拼接n个原字符串用的。
resData.newStr = str.replace(rule,((match,offset)=>{
resData.ids.push(offset)//存匹配到的值在原字符串的开始位置
return symbol.repeat(match.length)
}))
//要求四: 保留前三位和后三位中间五位为*的形式
if(dealPhone===true){
resData.newStr=resData.newStr.replace(/(\d{3})\d{5}(\d{3})/,'$1*****$2')
}
return resData;
};
module.exports = toDesensitization;第三题：芝麻开门
题目要求：
解题思路：
本题主要考js中的Promise对象。
根据题目要求首先我们点击文本框的时候出现弹框，template中就是弹窗的所有内容，我们将它添加到body元素中去就可以实现点击出现弹窗效果。
分别为确定按钮和取消按钮绑定单击事件，观察上面单击文本框按钮代码发现绑定了异步回调，且成功的时候对弹窗中输入的值进行了判断，并执行响应操作。如果失败就输出失败的原因。所有结合弹窗取消按钮就代表事件失败并将失败原因传给它，确定按钮就代表成功，并传入弹窗文本框的值。最后都要关闭弹窗。
const incantations = "芝麻开门";
function init(el) {
document.querySelector(".wrapper .btn").addEventListener("click", () => {
mPrompt()
.then((res) => {
if (res === incantations) {
document
.querySelectorAll("#door .doors")[0]
.classList.add("door-left");
document
.querySelectorAll("#door .doors")[1]
.classList.add("door-right");
}
})
.catch((err) => {
console.log(err);
});
});
}
/**
* @description: 调用函数，开启弹窗，记录输入框的内容，并通过 promise 异步返回输入框中的内容
* @return {Promise}
*/
function mPrompt() {
// 弹窗必须使用以下结构 template 保存的是弹窗的结构字符串，可以先转化为 DOM 再通过 appendChild 方式插入到 body 中
const template = `
`;
const div = document.createElement("div");
// TODO：待补充代码
//开启弹窗
div.innerHTML=template
document.querySelector('body').appendChild(div)
//点击取消按钮
return new Promise((res,rej)=>{
document.getElementById('cancel').addEventListener('click',()=>{
rej(false)
//关闭弹窗
document.querySelector('body').removeChild(div)
})
//点击确定按钮
document.getElementById('confirm').addEventListener('click',()=>{
var value=document.querySelector('.message-body>input').value
res(value)
//关闭弹窗
document.querySelector('body').removeChild(div)
})
})
}
第四题：宝贵的一票
题目要求：
解题思路：
观察最后效果gif图得知：本题主要需要实现点击添加选项实现新增一个带×删除按钮的选项，并且上面两个原本就在的选项后面也要带删除按钮。点击删除按钮需要实现删除当前这个选项并且选项的编号要重新编成连续的。且如果删除到最后只剩两个选项了，那么就不能进行删除操作了，移除它们的删除按钮。
第五题：平地起高楼
题目要求：
解题思路：
这是一道处理数据的题目，将数据处理成响应的样式并返回即可。本题主要考递归。
仔细观察原数据你会发现children中的pid永远是父级的id值，我们就利用这一点，因为刚开始传入的rootId值刚好也为0也就是四川省，如果rootid===id就添加到新数组中，再调convertToTree函数并传rootid的值为当前这个数据的id，去寻找它的children。
//方法一
function convertToTree(regions, rootId = "0") {
// TODO: 在这里写入具体的实现逻辑
// 将平铺的结构转化为树状结构，并将 rootId 下的所有子节点数组返回
// 如果不存在 rootId 下的子节点，则返回一个空数组
let resArr=[]
regions.forEach(element => {
if(element.pid===rootId){
resArr.push(element)
element.children=convertToTree(regions,element.id)
}
});
return resArr;
}
module.exports = convertToTree; // 检测需要，请勿删除//方法二:
function convertToTree(regions, rootId = "0") {
// TODO: 在这里写入具体的实现逻辑
// 将平铺的结构转化为树状结构，并将 rootId 下的所有子节点数组返回
// 如果不存在 rootId 下的子节点，则返回一个空数组
return regions.filter(item => item.pid == rootId).map(item => {
item.children = convertToTree(regions, item.id),
return item
})
}
module.exports = convertToTree; // 检测需要，请勿删除结语
关于node相关知识点的题目还没做。如果以上知识有错误，请各位大佬帮忙及时指出。最后祝各位小伙伴在这届蓝桥杯中，取得满意的成绩！！！
真题地址
第十四届蓝桥杯（Web 应用开发）模拟赛 1 期-大学组：第十四届蓝桥杯（Web 应用开发）模拟赛 1 期-大学组 - 蓝桥云课 (lanqiao.cn)
https://www.lanqiao.cn/contests/web-2023-dx-1/challenges/第十四届蓝桥杯（Web 应用开发）模拟赛 2 期-大学组：
第十四届蓝桥杯（Web 应用开发）模拟赛 2 期-大学组 - 蓝桥云课 (lanqiao.cn)