[蓝桥杯Web组备赛]第15届蓝桥杯第三期模拟赛题解（前6题）_蓝桥杯web模拟题

前言

题目难度：

1. 创意广告牌（简单）        2.朋友圈（中等）        3.营业状态切换（简单）

4.原子化CSS（简单）         5.神秘咒语（简单）     6.趣味加密解密（困难）

题目难度相对而言，大家不必过多争论，加油！

1. 创意广告牌

题目：1.创意广告牌 - 蓝桥云课 (lanqiao.cn)（简单）

题析

一道简单的签到题，只需要在目标元素下，完成指定的样式修饰就好了

1. 改变圆角：border-radius，

2. 设置背景：background-image

3. 元素指定方向的倾斜：transform：skewX(xx deg)

题解

.billboard {
  position: relative;
  background-color: #8e6534;
  color: #fff;
  padding: 20px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  background-size: cover;
  /* TODO：待补充代码  设置圆角 10px，背景图片为woodiness.jpg  */
  border-radius:10px;
  background-image: url(../images/woodiness.jpg);
}
.top-sign {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #a87f4a;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  /* TODO：待补充代码   上面两个角是圆角 15px，下面两个角是直角  元素 x 轴倾斜 -20度*/
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  transform: skewX(-20deg);
}

2. 朋友圈

题目：2.朋友圈 - 蓝桥云课 (lanqiao.cn) （中等）

题析

1. 编写一个防抖函数，这算是基本功，主要是利用闭包的思想，利用回调函数或时间戳来防止用户的频繁操作。它经常会与节流函数一同提出，其本质就是用于优化高频率执行代码的手段之一。有句古话叫做：防抖是回城，节流即是技能冷却。

2. ① 输入文本即存入缓存：localStorage.setItem('savedText',text.value)

    ②页面加载时检查缓存，将输入框与文本对应：localStorage.getItem('savedText')

    ③发表即清空文本框和缓存： text.value='';  localStorage.removeItem('savedText');

3. 根据输入框是否有文字来更改“发表”按钮样式：post.removeAttribute('disabled')
    post.setAttribute("disabled",'disabled')

题解

// 1. 防抖函数
  function debounce(fn, delay) {
    // return fn; // 这一行是为了确保页面正常运行，可以去掉
    // TODO: 请实现函数防抖的功能
    let timeout;
    return function(){
      const _this=this;
      const args=[...arguments];
      if(timeout) clearTimeout(timeout);
      timeout =setTimeout(()=>{
        fn.apply(_this,args)
      },delay)
    }
  }
 
// 2.输入即添入缓存
// TODO: 请在此补充用户输入时设置缓存和调整按钮状态的代码
let text=document.getElementById("text");
let post=document.getElementById("post");
localStorage.setItem('savedText',text.value);
// TODO-END
if(text.value.trim()){
  post.removeAttribute('disabled')
}else{
  post.setAttribute("disabled",'disabled')
}
 
 
// 3.检查缓存，更改按钮样式
// TODO: 请在此补充页面加载时缓存检查的代码
let text=document.getElementById("text");
let post=document.getElementById("post");
let temp=localStorage.getItem('savedText')
if(temp) text.value=temp;
if(text.value.trim()){
   post.removeAttribute('disabled')
}else{
   post.setAttribute("disabled",'disabled')
}
 
// 4.发表，更改按钮样式
// TODO: 请在此补充用户点击“发表”按钮时清空文本框和缓存的代码
let text=document.getElementById("text");
let post=document.getElementById("post");
text.value='';
localStorage.removeItem('savedText');
if(text.value.trim()){
  post.removeAttribute('disabled')
}else{
  post.setAttribute("disabled",'disabled')
}

3. 营业状态切换

题目：3.营业状态切换 - 蓝桥云课 (lanqiao.cn)  （简单）

 题析

这道题只是 Vue3的简单应用，主要是想让我们通过一个函数进行封装，封装的同时，需要考虑到响应式的问题。

通过观察代码中的数据，我们可以发现影响到状态变化的就一个变量即 isWorking，题目已经帮我们处理好逻辑了，只需要让我们定义并给出该值就好，这些值在这道题目里面，是通过 useToggle 来进行编写。

题解

function useToggle(state) {
    // TODO:待补充代码
    const isWorking = ref(state); 
    return [isWorking,() => {isWorking.value = !isWorking.value;}]
}

4. 原子化 CSS

题目：4.原子化CSS - 蓝桥云课 (lanqiao.cn)（简单）

 题析

这道题同样也是道签到题，实现元素纵向布局即可，这里的元素采用flex布局来实现。

 题解

/* TODO: 实现原子化 flex */
[flex="~ col"]{
  display: flex;
  flex-direction: column;
}

5. 神秘咒语

题目：5.神秘咒语 - 蓝桥云课 (lanqiao.cn)  （简单）

 题析

题目看着很长，但总结下来就一句话，你需要在发送axios的时候，顺便带上请求头！

那这道题其实也就不难，我们只需要在发送的时候带上header参数就好了

 题解

// 在两次请求里面，添加请求头即可
let {data} =  await axios.get('/spellone',{
  headers: {
    'Authorization': '2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7' 
  }
})

6. 趣味加密解密

题目：6.趣味加密解密 - 蓝桥云课 (lanqiao.cn) （困难）

题析 

我觉得，这道题之所以是困难题，主要的原因是：

1. 说明实在太长了，还要逆推个钩子

2. 只会简单的2进制转换，对于n进制转换还是不太熟悉，不难够正确地把握

解决方案：

首先，大家还是要先去看下题目下面的说明，看不懂也一定要稍微看一下！

接着，我们约定一下，在以下的内容中，我们视 plainText 为字符表，视 codes 为密码表，以便于我来写思路。

a. 加密过程

        ① 字符解码：目的是为了将字符以 UTF - 8 的格式解码

                解决：这个简单，用它里面的函数转换一下就好了

        ② 检查密码表：目的是对密码表作去重工作

                解决：算法做多了，一眼就是利用Set结构来进行去重就好了

        ③ 进制转换：目的是为了对字符表里面的各个项转换为要求的进制。

                解决：先确定一下转换后的进制位（即密码表的长度），进而对字符表中各个元素实现进制转换。这里，我们要注意一下：我们在做进制转换的时候，有一个特别重要的一个点，就是我们不能够直接去对一整个字符串去转换进制后得到结果！！这是因为，我们后续还要通过秘密表来进行解密的，若是转换多进制，我们直接去拿到整一串，会有一定的影响的。我们应该拿一个数组去存储这些值。

        ④ 获取单位长度：目的是为了能够确定下，我们现在的这个密码表，它每次是能够编码字符表中的几个字符的意思。

                解决：其实我一开始有点懵，虽然它下面也有提示，我来解释一下为什么会有这个概念（就是，我们现在用的电脑或者系统啊什么的，其实都是用二进制来存储的，对于二进制系统中，我们去描述一个东西，字符也好，图片也罢，是通过字节来去描述的，它拥有256种不同的状态。那如果此时，我们要用n进制去表示一个二进制里面的东西的话，就要能够使得这n进制表示这256种状态，但这就代表着，如果我们用n进制，还是用原来2进制的单位长度8的话，会有冗余且不准确，因此我们就需要找到能够表示256种状态的最小值，即n^x>=256，x的最小值），这里的x就是我们所要求的单位长度。

        ⑤ 补齐编码：目的是为了让密码表能够完整解码字符表

                解决：这部其实很简单，让字符表中的元素长度跟密码表编译时的单位长度匹配就好

        ⑥ 编码映射+ 翻转密码并输出

                解决：按照密码表的字符顺序，来编译字符表，其实说白了，比如我现在要用密码表“你好” 来编译字符表 ['00000000','00110001']，那就是["你你你你你你你你","你你好好你你你好"]，因为在这里0对应密码表第一个，即"你"；这里的1对应密码表第二个，即"好"。

b. 解密过程

这是加密的逆序化，以下是我对其的总结，总而言之，就是将加密过程倒过来看。

        ① 确定正确的密码表：原因很简单，这个不需要其他数据，只需要将此时的密码表拿到就好了

                解决：跟上面的操作一样，利用Set结构去做就好。

        ② 确定转换的进制及单位长度：也很好解决，跟上面的步骤一样，不再多述

        ③ 检查是否有错误：这是题目所给的要求，如果所给密码表不能够完整解码字符表的话，就可能是因为所给的数据有问题，因此返回 "ERROR"

        ④ 获取映射后的字符编码：加密的时候，最后是有拼接的，所以我们要把它拿出来

                解决：利用单位长度对字符串进行切割，主要利用slice方法，或者你也可以用指针去掉，定义一个指针，来对字符串进行切割，比较简单

        ⑤ 获取映射前的字符编码：在加密时，我们对其按照密码表在序列来进行加密的，所以我们现在就要根据这个，来找到字符表中各个元素原来的序列是什么。

                解决：对字符表进行遍历，让密码表与之对应，这里采用map的写法（这里一定要注意，我们在加密的过程中是翻转过的噢）

        ⑥ 将n进制转为原来的十进制并输出以 UTF8 格式解码后的字符串：

                解决：我们其实很熟悉啦，转换进制嘛，然后再调用它里面的一个函数就好了

总结来说，这道题对于进制的转换理解还是有挺高要求的，还有就是读题上，有挺多坑，但做完可能就会觉得没啥，一起加油吧！

题解

//自己补充的代码：用于求解单位长度，l为密码表的长度
function getDan(l){
    var temp;
    for(temp=1;l**temp<256;temp++){}
    return temp;
}
 
 
/*
    加密函数 encryption 接受两个参数 plainText 和 codes ，能够实现对明文的加密，并返回加密后的密文字符串。
    函数参数 plainText 是用户输入的明文，类型为 String 字符串。
    函数参数 codes 是用户输入的密码表，类型也为 String 字符串，并且可能存在重复字符，需要进行去重
    若去重后 codes 长度小于 2 则应采用默认密码表 defaultCodes 。
*/
 
function encryption(plainText, codes) {
    //TODO
    //1. 字符解码
    var target = string2Unit8Array(plainText);
    //2. 检查密码表
    var temp = Array.from(new Set(codes)).join("");
    if(temp.length<2) temp=defaultCodes;
    //3. 进制转换
    var len = temp.length;  //转换的进制位
    // 进制转换函数
    function convertRadix(num, radix) {
        const r = [];
        while(num > 0) {
            r.push(num % radix);
            num = Math.floor(num / radix);
        }
        return r.reverse();
    }
    //4. 确定单位长度
    var dan = getDan(len);
    //5. 补齐编码
    // 补齐编码函数
    function padLeftArray(arr, maxLength, item) {
        const narr = [...arr];
        while(narr.length < maxLength)
            narr.splice(0,0,item);
        return narr;
    }
    const enc1 = Array.from(target).map(v => padLeftArray(convertRadix(v, len), dan, 0));
    //6. 编码映射并翻转密码输出（此时，编码表为 arr；密码表为 codes）
    const res=enc1.map(v => v.map(i => temp[i]).reverse().join(""))
    return res.join("");
}
/*
    加密函数 decryption 接受两个参数 cipherText 和 codes ，能够实现对密文的解密，并返回解密之后的明文字符串。
    函数参数 cipherText 是用户输入的密文，类型为 String 字符串。
    函数参数 codes 是用户输入的密码表，类型也为 String 字符串，并且可能存在重复字符，需要进行去重
    若去重后 codes 长度小于 2 则应采用默认密码表 defaultCodes 。
*/
function decryption(cipherText,codes){
    //TODO
    // 1. 确定正确的密码表（temp）
    var temp = Array.from(new Set(codes)).join("");
    if(temp.length<2) temp= defaultCodes;
    // 2. 确定转换的进制（len）及单位长度 (dan)
    var len = temp.length;  
    var dan = getDan(len);  
    // 3. 检查是否有错误
    if (cipherText.length % dan !== 0) return "ERROR";
    // 4. 获取映射后的字符编码
    var enc = [], ct =cipherText;
    while(ct.length > 0) {
        enc.push(ct.slice(0, dan));
        ct = ct.slice(dan);
    }
    //5. 获取映射前的字符编码，此时的密码表为：temp,字符编码为：enc
    const enc1 = enc.map(v => Array.from(v).reverse().map(s => temp.indexOf(s)));
    //6. 将len进制转为原来的十进制
    // 进制转换函数
    function convertRadix(arr, radix) {
        var num = 0;
        const narr = arr.reverse();
        for(var i=0;i<narr.length;i++)
            num += narr[i] * Math.pow(radix, i);
        return num;
    }
    const pt = enc1.map(v => convertRadix(v, len));
    return uint8Array2String(pt);
}

还有5道题 ，有些还是有点难度的，比如带有正则什么的，这几天也会更新出来，并赋上地址，欢迎大家来学习！