第十五届蓝桥杯（Web 应用开发）模拟赛 3 期-大学组And职业组

1、创意广告牌 代码：

.billboard {
  position: relative;
  background-color: #8e6534;
  color: #fff;
  padding: 20px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  background-size: cover;
  border-radius: 10px; /* 设置圆角为 10px */
  background-image: url('../images/woodiness.jpg'); /* 设置背景图片为 woodiness.jpg */
}
.top-sign {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #a87f4a;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  border-top-left-radius: 15px; /* 设置上左角为圆角 15px */
  border-top-right-radius: 15px; /* 设置上右角为圆角 15px */
  transform: skewX(-20deg); /* 在 x 轴方向倾斜元素 20度 */
}

2、原子化CSS 的代码

 直接在css下面加个flex弹性布局的操作，然后竖着。

/* TODO: 实现原子化 flex */
div {
  display: flex;
  flex-direction: column;
}

3、神秘咒语

简单的token操作，axios知识点，请求的时候在请求头带上token，就可以顺利请求访问到。

// TODO：新增或者修改以下代码
let token = '2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7';
key1Button.addEventListener('click', async () => {
    // 从后台请求钥匙1的咒语部分
    key1Button.disabled = true;
    let {data} =  await axios.get('/spellone', {headers: {'Authorization': token}})
    spell1.innerHTML = data;
    tryOpenTreasureBox();
});
key2Button.addEventListener('click', async () => {
    // 从后台请求钥匙2的咒语部分
    key2Button.disabled = true;
    let {data} =  await axios.get('/spelltwo', {headers: {'Authorization': token}})
    spell2.innerHTML = data;
    tryOpenTreasureBox();
});

4、朋友圈 代码：

防抖考了，会不会在真题的时候考节流。。。

JS练习题

document.addEventListener("DOMContentLoaded", function() {
  let textContent = localStorage.getItem('savedText');
  document.getElementById('text').value = textContent;
  show()
});
document.getElementById("text").addEventListener(
  "input",
  debounce(function() {
    document.getElementById("prompt").textContent = "正在保存中...";
    let textContent = document.getElementById('text').value;
    localStorage.setItem('savedText', textContent);
    show()
    setTimeout(function() {
      document.getElementById("prompt").textContent = "内容已保存";
    }, 750);
  }, 200)
);
document.getElementById("post").addEventListener("click", function() {
  const content = document.getElementById("text").value;
  // 假设 createContent 是一个已定义的函数，用于创建表示内容的DOM元素
  const element = createContent(content);
  document.querySelector(".contents").appendChild(element);
  document.getElementById("prompt").textContent = "发表成功！";
  document.getElementById("text").value = '';
  localStorage.removeItem('savedText');
  show()
});
// 防抖工具函数
/**
 * @param  {function} fn  - 回调函数
 * @param  {string} delay - 函数执行延迟，单位为ms
 */
function debounce(fn, delay) {
  // return fn; // 这一行是为了确保页面正常运行，可以去掉
  let timer = null;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn();
    }, delay);
  }
  // TODO: 请实现函数防抖的功能
}
function show(){
  if (document.getElementById("text").value !== '') {
    document.getElementById("post").removeAttribute('disabled');
  } else {
    document.getElementById("post").setAttribute('disabled', 'disabled');
  }
}
// 用户点击“发表”后，创建一条新信息的DOM元素
function createContent(content) {
  const div = document.createElement("div");
  const d = new Date();
  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "删除";
  deleteBtn.addEventListener("click", function() {
    div.remove();
  });
  div.innerHTML = `${content}${d.toLocaleString()}`;
  div.appendChild(deleteBtn);
  return div;
}

5、美食蛋白质揭秘 代码：

JS原生ajax请求 ）xhr = new XMLHttpRequest();

open("请求方式","请求路径“)；

用onload加载一次就行了，补充一个就是

• onreadystatechange
• 当 readyState 属性发生变化时，调用的事件处理器。

  
    
      
      
      不同食物的蛋白质占比
      
      
      
  
    
      
      营业状态切换
      
      
      
        
      
      
        const { ref } = Vue; // 引入Vue中的ref函数
        function useToggle(state) {
          // TODO:待补充代码
          let s1 = ref(state);
          function s2() {
            //调用这里的函数 返回 isWorking 为true 就得到workImage
            s1.value = !s1.value;
          }
          return [s1, s2]; //如果报错 那么就是返回值的问题了
        }
        const app = Vue.createApp({
          setup() {
            const [isWorking, toggleWorking] = useToggle(false); // 使用自定义的useToggle函数创建状态和切换函数
            const workImage = "./images/open.jpg"; // 营业状态的图片路径
            const restImage = "./images/close.jpg"; // 打烊状态的图片路径
            return {
              isWorking,
              toggleWorking,
              workImage,
              restImage,
            };
          },
        });
        app.mount("#app"); // 将Vue应用挂载到id为app的元素上
      
    
  
  

  7、嘟嘟购物 ：

  这里就是vue3的练习，职业组的一道题，大学组的是一道node题。

  就是Pinia和vue3。WatchEffect监听 只要里面的响应式发生变化就会调用一次，还有在页面开始也会调用一次，至于Pinia，直接调用就行了，这里是非工程文件，已经有script引入了Pinia

  
    
      
      
      
      
      
      
      
      
      嘟嘟购物
    
    
      
        
          
            
              全部商品
            
            
            
              
                
                商品
                单价
                数量
                小计
                操作
              
              
              
                
                  
                    
                  
                  
                    
                      
                    
                    {{item.name}}
                  
                  {{item.price}}
                  
                    
                      -
                      
                      +
                    
                  
                  
                    {{(item.price * item.priceCount).toFixed(2)}}
                  
                  删除
                
              
              
              
                
                
                  
                    已经选{{ selectdItemCount }}件商品
                  
                  
                    总价： ￥{{ totalItemPrice }}
                  
                  去结算
                
              
            
          
        
      
    
    
      const { createApp, onMounted, watchEffect } = Vue;
      const { createPinia } = Pinia;
      const { ElMessage, ElNotification } = ElementPlus;
      const app = Vue.createApp({
        setup() {
          // TODO:补充代码，实现目标效果
          const goodsStock = Array.from(useGoodsStore().store);
          const goodId = [];
          const goodsArray = ref([]);
          const priceCount = ref(1);
          for (const item of goodsStock) {
            //这个是判断有没有货的操作
            if (item.stock !== 0) {
              goodId.push(item.id);
            } else {
              goodId.push(-1);
            }
          }
          const getGoods = () => {
            axios.get("./js/goods.json").then((res) => {
              const tempArray = [];
              // console.log(goodId); //有货的id 没货的id为 -1
              for (let i = 0; i  {
            goodsArray.value[index].priceCount++;
          };
          const decrement = (index) => {
            if (goodsArray.value[index].priceCount === 1) {
              return;
            }
            goodsArray.value[index].priceCount--;
          };
          const updateCheckedState = (event, index) => {
            //给到响应式数组里面
            goodsArray.value[index].checked = event.target.checked;
          };
          const selectdItemCount = ref(0);
          const totalItemPrice = ref(0);
          watchEffect(() => {
            //就是这里面的响应式发生变化 就会触发watchEffect()
            selectdItemCount.value = 0;
            totalItemPrice.value = 0;
            for (const item of goodsArray.value) {
              if (item.checked === true) {
                selectdItemCount.value += item.priceCount;
                totalItemPrice.value += item.priceCount * item.price;
              }
            }
            totalItemPrice.value = totalItemPrice.value.toFixed(2);
          });
          //若没有选择商品
          const shopNoSelect = () => {
            for (const item of goodsArray.value) {
              if (item.checked === true) {
                return true;
              }
            }
            return false; //如果没有一个true就返回false
          };
          const submit = async () => {
            //提交结算
            try {
              if (!shopNoSelect()) {
                //则提示警告信息:
                ElMessage({
                  message: "请至少选择一件商品",
                  type: "warning",
                });
              }
              for (const item of goodsArray.value) {
                console.log(item.priceCount);
                if (item.checked === true) {
                  let goodsNamePriceCount = await useGoodsStore().fetchInventory(
                    item.name
                  );
                  console.log(goodsNamePriceCount);
                  if (item.priceCount > goodsNamePriceCount) {
                    ElMessage.error(`结算失败，${item.name}库存不足`);
                    return;
                  }
                }
              }
              ElMessage({
                message: "结算成功",
                type: "success",
              });
            } catch (error) {
              ElMessage.error(`结算失败，${请求返回的错误信息}`);
            }
          };
          onMounted(() => {
            //页面渲染之后，直接调用
            getGoods(); //调用
          });
          return {
            //在这个非工程文件当中的vue3 都是需要return一下的
            goodsArray,
            priceCount,
            add,
            decrement,
            selectdItemCount,
            totalItemPrice,
            updateCheckedState,
            submit,
          };
          // TODOEnd
        },
      });
      app.use(ElementPlus);
      app.use(createPinia());
      app.mount("#app");
    
  
  

  8、冰岛人：

  我这种方法是比较简单的 其实还可以用map集合或者 递归 他这里说五代人 并不包含第五代人。

  /**
   * @description 通过输入的两个人的姓名返回相应的字符串
   * @param {array} data 当地的人口信息
   * @param {string} name1 要查询的两人名字之一
   * @param {string} name2 要查询的两人名字之一
   * @return {string} 根据被查询两人的名字返回对应的字符串
   * */
  function marry(data, name1, name2) {
    // TODO:补充代码，实现目标效果
    console.log(data); //和NameAll是对应的
    let data2 = deepCopy(data);
    console.log(data2);
    const NameAll = [];
    for (let i = 0; i  name == name1);
    const person2 = NameAll.findIndex((name) => name == name2);
    console.log(person1);
    console.log(person2);
    if (person1 == -1 || person2 == -1) {
      return "NA";
    }
    //直接判断性别
    const gender1 = getGender(data2[person1].familyName);
    const gender2 = getGender(data2[person2].familyName);
    if (gender1 === gender2) {
      return "Whatever";
    }
    let nameObj1 = data2[person1];
    let nameObj2 = data2[person2];
    //前面的代码都已经拦截完毕了，现在开始直接进入查找就行了
    //april mikesdottir 和 steve billsson 是no
    //april mike 和 steve bill 是 no
    if (hasCommonAncestor(data2, nameObj1, nameObj2)) {
      return "No";
    } else {
      return "Yes";
    }
  }
  //深拷贝
  function deepCopy(obj) {
    if (typeof obj !== 'object' || obj === null) {
      return obj;
    }
    
    let copy = Array.isArray(obj) ? [] : {};
    
    for (let key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        copy[key] = deepCopy(obj[key]);
      }
    }
    
    return copy;
  }
  function hasCommonAncestor(data, name1, name2) {
    const ancestors1 = computeAncestors(data, name1);
    const ancestors2 = computeAncestors(data, name2);
    if (ancestors1 == ancestors2) {
      return true;
    }
    return false;
  }
  //找到最后的祖先
  function computeAncestors(data, name) {
    //先切割掉 sson和sdottir 不要割掉 m 和 f 知道是祖宗
    for (let i = 0; i  
  9、这是一个“浏览器”
   
  也是纯粹的JS题，功能是实现了，但是不知为啥过不了检测。
   
  "use strict";
  class Tab {
    // 构造方法
    constructor(id) {
      // 获取元素
      this.main = document.querySelector(id);
      this.add = this.main.querySelector(".tabadd");
      this.ul = this.main.querySelector(".fisrstnav ul");
      this.fsection = this.main.querySelector(".tabscon"); //content页面
      this.init();
    }
    // 初始化
    init() {
      this.updateNode();
      // init初始化操作让相关元素绑定事件
      
      this.add.onclick = this.addTab.bind(this.add, this);
      for (var i = 0; i  0) { // 是最后一个标签页
            event.lis[index - 1].click(); // 选中临近的上一个标签页
        }
    }
    event.ul.removeChild(event.lis[index]); // 从页面中删除对应的标签页
    event.fsection.removeChild(event.sections[index]); // 从页面中删除对应的内容页
    event.updateNode(); // 更新节点
  }
    // 5.修改功能
    editTab() {
      var str = this.innerHTML;
      window.getSelection
        ? window.getSelection().removeAllRanges()
        : document.Selection.empty();
      this.innerHTML = '';
      var input = this.children[0];
      input.value = str;
      input.select(); //让文本框里的文字处于选定状态
      // TODO：实现双击修改内容，当文本框失焦时，把修改的值赋给被双击的对象，并作上已修改的标记
      let li = this;
      input.onblur = function () {
        li.innerHTML = this.value
      }
      // TODO结束
    }
  }
  var tab = new Tab("#tab");
   
  （图片来源网络，侵删）