【蓝桥杯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);
})

第二题：梅楼封的一天

题目要求：

解题思路：

1. 要求一和要求二很简单直接写判断条件并返回相应的值就可以了。
2. 要求三相对比较复杂，因为规则可能是一个字符串，也可能是多个字符串以数组的形式传入。所以我们要判断如果传入的规则是数组的话应该如何？不是数组的话应该如何？(具体写法写在代码注释里了)
3. 要求四就是一个号码的替换，将一个正常的号码替换成，保留三个和后三个中间五个是*号的样子，懂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 = `
        <div class="modal">
            <div class="message-box">
                <div class="message-header">请输入咒语</div>
                <div class="message-body">
                    <input type="text">
                </div>
                <div class="message-footer">
                    <button class="btn btn-small" id='cancel'>取消</button>
                    <button class="btn btn-small btn-primary" id='confirm'>确定</button>
                </div>
            </div>
        </div>
    `;
  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图得知：本题主要需要实现点击添加选项实现新增一个带×删除按钮的选项，并且上面两个原本就在的选项后面也要带删除按钮。点击删除按钮需要实现删除当前这个选项并且选项的编号要重新编成连续的。且如果删除到最后只剩两个选项了，那么就不能进行删除操作了，移除它们的删除按钮。

<script>
      let initRender = (txt) => {
        return `<div class="mb-3 row">
                <label class="col-sm-2 col-form-label txt">${txt}</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control">
               </div>
            </div>`;
      };
      $(
        (function () {
          // 初始化的时候渲染两条数据，且不带删除符号
          for (let index = 0; index < 2; index++) {
            let initList = initRender(`选项${index + 1}`);
            $(".list").append(initList);
          }

          // 点击加号逻辑
          $(".add").click(function () {
            // TODO 待补充代码
            index=$(".list>.mb-3").length
            //第一次点加号就要为先前的选项加上删除按钮，只在第一次的时候加
            if(index==2){
              $(".list>.mb-3").append(`
                <div class="col-sm-1">
                  <!-- 删除图标 -->
                  <img class="del-icon" src="./images/x.svg" alt="" />
                </div>
              `)
            }
            //使用append或者Toappend添加一个选项，选项结构题目中提供了。注意选项的编号，要与之前的连续。
            $(".list").append(`
              <div class="mb-3 row item">
                <label class="col-sm-2 col-form-label txt">选项${index+1}</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" />
                </div>
                <div class="col-sm-1">
                  <!-- 删除图标 -->
                  <img class="del-icon" src="./images/x.svg" alt="" />
                </div>
              </div>`
            )
          });
          // 点击 x 删除逻辑，列表小于 2 项时不显示删除图标
          $(document).on("click", ".del-icon", function () {
            // TODO 待补充代码
            //删除当前点击删除按钮的选项
            $(this).parents('div.mb-3.row').remove();
            //重新编号
            $(".list>.mb-3").each((i,element)=>{
              $(".list>.mb-3>label")[i].innerText=`选项${i+1}`
              //如果只剩两个选项了，那么就删除它们的删除按钮。
              if ($('.list').children().length <= 2) {
                const delItem = $(element).find('div.col-sm-1');
                delItem.remove();
              }
            })
          });
        })()
      );
    </script>

第五题：平地起高楼

题目要求：

解题思路：

这是一道处理数据的题目，将数据处理成响应的样式并返回即可。本题主要考递归。

仔细观察原数据你会发现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)https://www.lanqiao.cn/contests/web-2023-dx-2/challenges/第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-大学组：第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-大学组 - 蓝桥云课 (lanqiao.cn)https://www.lanqiao.cn/contests/web-2023-dx-3/challenges/