0
0

第十五届蓝桥杯（Web 应用开发）模拟赛 3 期-大学组（被题目描述坑惨了）

1.创意广告牌

这个题目不多说了，只要知道这些css应该都能写出来，不会的平时多查查文档就记住了。

代码：

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

2.原子化css

这个题目主要需要知道的是css的属性选择器，可以查文档看看就知道了，不会的话其实看看其他的css应该也能联想到哈。

代码：

  1. /* TODO: 实现原子化 flex */
  2. div[flex="~ col"] {
  3.   display: flex;
  4.   flex-direction: column;
  5. }

3.神秘咒语

这个考的也就是请求头携带参数，还不会的得抓紧学一下XML，fetch，axios了，这个从蓝桥杯模拟题的趋势来看，考的很频繁，甚至后面的题目发个请求就有3，5分。

代码：

  1. const key1Button = document.getElementById('key1') // 钥匙 1
  2. const key2Button = document.getElementById('key2') // 钥匙 2
  3. const spell1 = document.getElementById('spell1') // 咒语 1
  4. const spell2 = document.getElementById('spell2') //咒语 2
  6. // TODO：新增或者修改以下代码
  8. key1Button.addEventListener('click', async () => {
  9.   // 从后台请求钥匙1的咒语部分
  10.   key1Button.disabled = true
  11.   try {
  12.     let { data } = await axios.get('/spellone', {
  13.       headers: {
  14.         Authorization: 'Bearer 2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7' // 添加 Authorization 字段携带 token
  15.       }
  16.     })
  17.     console.log(data)
  18.     spell1.innerHTML = data
  19.     tryOpenTreasureBox()
  20.   } catch (error) {
  21.     console.error('请求钥匙1咒语失败：', error)
  22.   }
  23. })
  25. key2Button.addEventListener('click', async () => {
  26.   // 从后台请求钥匙2的咒语部分
  27.   key2Button.disabled = true
  28.   try {
  29.     let { data } = await axios.get('/spelltwo', {
  30.       headers: {
  31.         Authorization: 'Bearer 2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7' // 添加 Authorization 字段携带 token
  32.       }
  33.     })
  34.     spell2.innerHTML = data
  35.     tryOpenTreasureBox()
  36.   } catch (error) {
  37.     console.error('请求钥匙2咒语失败：', error)
  38.   }
  39. })
  41. function tryOpenTreasureBox() {
  42.   if (spell1.innerHTML == '星辰闪耀' && spell2.innerHTML == '众星归位') {
  43.     const box = document.getElementById('treasureBox')
  44.     const suceessmessage = document.getElementById('suceess-message')
  45.     box.classList.add('opened')
  46.     suceessmessage.style.display = 'block'
  47.   }
  48. }

4.朋友圈

1.防抖函数的实现

其实这个还算挺简单的，就是一个非常常规的防抖，会的自然肯定是会的，不会的可以花几分钟时间看看视频学一下，很快的。

代码：

  1. function debounce(fn, delay) {
  2.   let timer = null
  3.   return function () {
  4.     const context = this
  5.     const args = arguments
  6.     clearTimeout(timer)
  7.     timer = setTimeout(function () {
  8.       fn.apply(context, args)
  9.     }, delay)
  10.   }
  11. }

2.将内容存储到localStorage中

这个按照要求做就好了，需要做哪些提示，加哪些属性都有说明。

  1. document.getElementById('text').addEventListener(
  2.   'input',
  3.   debounce(function () {
  4.     // 提示正在保存中
  5.     document.getElementById('prompt').textContent = '正在保存中...'
  7.     // 设置缓存
  8.     const text = document.getElementById('text').value
  9.     if (text.length <= 0) {
  10.       document.getElementById('post').setAttribute('disabled', 'disabled')
  11.     } else {
  12.       document.getElementById('post').removeAttribute('disabled')
  13.     }
  14.     localStorage.setItem('savedText', text)
  16.     // 过一段时间后提示保存完成
  17.     setTimeout(function () {
  18.       document.getElementById('prompt').textContent = '内容已保存'
  19.     }, 750)
  20.   }, 200)
  21. )

3.这个就是对页面的一些动态展示了，需要理清页面渲染的流程是怎么样的，什么时候显示什么，什么情况下该显示什么，经过一些判断后添加必要的属性，类名等就行。

  1. document.getElementById('post').addEventListener('click', function () {
  2.   const content = document.getElementById('text').value
  3.   const element = createContent(content)
  4.   document.querySelector('.contents').appendChild(element)
  5.   document.getElementById('prompt').textContent = ''
  7.   // TODO: 请在此补充用户点击“发表”按钮时清空文本框和缓存的代码
  8.   document.getElementById('text').value = ''
  9.   localStorage.removeItem('savedText')
  10.   // 同时需要将按钮的 disabled 属性设置回来
  11.   document.getElementById('post').setAttribute('disabled', 'disabled')
  12. })

页面初次加载的缓存

  1. document.addEventListener('DOMContentLoaded', function () {
  2.   // 页面加载时检查 localStorage 中是否有缓存文本数据
  3.   const savedText = localStorage.getItem('savedText')
  4.   if (savedText) {
  5.     document.getElementById('text').value = savedText
  6.     // 页面加载时检查输入框内容，设置按钮状态
  7.     if (savedText.length > 0) {
  8.       document.getElementById('post').removeAttribute('disabled')
  9.     } else {
  10.       document.getElementById('post').setAttribute('disabled', 'disabled')
  11.     }
  12.   } else {
  13.     // 如果没有缓存文本数据，则将按钮设置为禁用状态
  14.     document.getElementById('post').setAttribute('disabled', 'disabled')
  15.   }
  16. })

5.美食蛋白揭秘

1.发请求拿到需要的数据

这里的小坑就是拿到的数据渲染出来是不对的，要去除掉多余的数据

  1.  async function fetchData() {
  2.                     // TODO:待补充代码 
  3.          let data = await fetch(MockURL).then(res => res.json())
  4.              data.unshift({
  5.                         name: '表头',
  6.                         icon: 'none'
  7.                     })
  8.              echartsInit(data)
  9.                     //去除第一个元素
  10.              dataList.value = data.slice(1)
  11.                 }
  13. onMounted(() => {
  14.     fetchData();
  15. });
  16. return {
  17.   echartsInit,
  18.   fetchData,
  19.   dataList
  20. };

2.渲染页面

  1. <!-- TODO:待补充代码，渲染获取的数据 -->
  2. <div class="protein-item" v-for="data in dataList" :key="data.name">
  3.          {{data.name}}
  4.          {{data.value}}
  5. </div>

6.营业状态变更

这个题目要实现切换状态，通过观察题目可以看到，需要返回的是一个Boolean值，这个是来确定页面该如何渲染的，第二个需要返回的是一个函数，用来切换状态的。

首先我们要想要的是，返回的值肯定需要是一个ref()，响应式的值，因为我们知道啊，在页面不刷新的情况下，ref()，响应式数据发生变化，页面也会发生变化的，那么想到这个就好办了。

  1. function useToggle(state) {
  2.             // TODO:待补充代码
  3.             const toggledState = ref(state)
  5.             function toggle() {
  6.                 toggledState.value = !toggledState.value
  7.             }
  8.             return [toggledState, toggle]
  9.         
  10.         }

7.小说阅读器

这个题目真的是把我坑惨了，坑的我想哭。

但是我的解法可能有点粗糙哈，大佬看到了见谅。

刚开始看到这个题目的数据，在解析数据过程中还好，我用的比较笨拙的办法一步步的解析出来了，提交后也能运行，json文件中的数据也有了，可是正当我提交的时候却出错了。

这是题目描述的格式：

这是我第一次运行出来的格式：

感觉没有一点问题了，不过还是不行，就在我绞尽脑汁没想到办法，重新读了一遍题目，看到了这句话：

我就修改代码将写入格式改成这种了： 空格都已经去掉了，就在我满心欢喜的提交代码时，还是出错不给过，我真的想不通到底哪里出了问题。

最后在我看了一遍txt文件后，我再想是不是标题的问题，

但是看题目描述的结果又是这样的，我抱着试试的感觉修改提交后，终于通过了🎉🎉🎉

真的我要(;´༎ຶД༎ຶ`) ，太坑我了

代码：

  1. const fs = require('fs')
  3. let readFilePath = './run/book.txt'
  4. let writeFilePath = './run/book.json'
  5. let options = 'UTF-8'
  7. //读取txt小说文件,并按对应数据格式返回。
  8. const readFile = (file) => {
  9.   try {
  10.     let result = null
  11.     let arr = {
  12.       name: '',
  13.       data: []
  14.     }
  16.     let res = fs.readFileSync(file, { encoding: options })
  17.     res = res.split('------------\n\n')
  18.     for (let i = 0; i < res.length; i++) {
  19.       const lines = res[i]
  20.         .trim()
  21.         .split('\r\n')
  22.         .filter((item) => {
  23.           return item !== '' && item !== '------------' && item !== '    '
  24.         })
  25.       arr.name = lines[0].slice(0, 8)
  26.       lines.splice(0, 1)
  27.       let temp1 = []
  28.       let temp2 = []
  29.       for (let i = 0; i < lines.length; i++) {
  30.         if (lines[i].slice(0, 3) === '---') {
  31.           if (temp2.length > 0) {
  32.             temp2.forEach((item) => {
  33.               arr.data.push(item)
  34.             })
  35.           }
  36.           temp1.push({
  37.             isRoll: true,
  38.             title: lines[i]
  39.               .split('---'[1])
  40.               .filter((item) => item !== '')
  41.               .join('')
  42.           })
  43.           arr.data.push(temp1[0])
  44.           temp1 = []
  45.           temp2 = []
  46.         } else if (lines[i].slice(0, 1) === '第') {
  47.           temp2.push({ title: lines[i], content: [] })
  48.         } else {
  49.           temp2[temp2.length - 1].content.push(lines[i].trim())
  50.         }
  51.       }
  52.       if (temp2.length > 0) {
  53.         temp2.forEach((item) => {
  54.           arr.data.push(item)
  55.         })
  56.       }
  57.     }
  59.     result = arr
  60.     return JSON.stringify(result)
  61.   } catch (err) {
  62.     return null
  63.   }
  64. }
  66. //写入json文件中
  67. const writeFile = (file, data) => {
  68.   try {
  69.     fs.writeFileSync(file, data, { encoding: options })
  70.   } catch (err) {
  71.     console.log(err)
  72.   }
  73. }
  75. // 执行读取文件
  76. let data = readFile(readFilePath)
  77. // console.log(data)
  78. if (data != null) writeFile(writeFilePath, data)
  79. module.exports = {
  80.   writeFile,
  81.   readFile
  82. }

component组件

  1. next(value) {
  2.       // TODO：待补充代码
  3.       this.activeChapter += value
  5.       if (this.activeChapter <= 0) {
  6.         this.activeChapter = 1
  7.         return
  8.       }
  10.       if (this.activeChapter >= this.chapters.length - 1) {
  11.         this.activeChapter = this.chapters.length - 1
  12.         return
  13.       }
  15.       //跳过卷
  16.       if (this.activeChapter % 11 === 0 && value == 1) {
  17.         this.activeChapter += 1
  18.       }
  20.       if (this.activeChapter % 11 === 0 && value == -1) {
  21.         this.activeChapter -= 1
  22.       }
  23.     },
  24.   },
  25.   //通过axios发起请求json数据，并渲染界面。
  26.   created() {
  27.     // TODO：待补充代码
  28.     axios.get('../run/book.json').then((res) => {
  29.       this.bookName = res.data.name
  30.       this.chapters = res.data.data
  31.     })
  32.   },

8.冰岛人

1.首先的话，我是打算先进行基本的判断，是否是不存在的人，是否是同性，然后直接输出结果

2.找出每个人的祖先数组，然后再进行判断，查看是否满足题目要求，然后返回对应的结果。

代码：

  1. /**
  2.  * @description 通过输入的两个人的姓名返回相应的字符串
  3.  * @param {array} data 当地的人口信息
  4.  * @param {string} name1 要查询的两人名字之一
  5.  * @param {string} name2 要查询的两人名字之一
  6.  * @return {string} 根据被查询两人的名字返回对应的字符串
  7.  * */
  9. function marry(data, name1, name2) {
  10.   function getAncestors(person, data) {
  11.     let ancestors = []
  12.     //找出person的父亲或者母亲
  13.     while (1) {
  14.       data.forEach((item) => {
  15.         if (item.givenName === /(\w+)(sson|sdottir)$/gi.exec(person.familyName)[1]) {
  16.           ancestors.push(item)
  17.         }
  18.       })
  19.       //判断是不是最后一个人了，查询ancestors的最后一个元素的familyName的后缀既不是sson也不是sdottir
  20.       if (!ancestors[ancestors.length - 1].familyName.endsWith('sson') && !ancestors[ancestors.length - 1].familyName.endsWith('sdottir')) {
  21.         break
  22.       }
  23.       //将personIndex的数据改成最新的数据
  24.       person = ancestors[ancestors.length - 1]
  25.     }
  26.     if (ancestors.length >= 4) {
  27.       ancestors.pop()
  28.     }
  29.     return ancestors
  30.   }
  32.   // 获取个人信息
  33.   let person1 = data.find((person) => person.givenName === name1.split(' ')[0])
  34.   let person2 = data.find((person) => person.givenName === name2.split(' ')[0])
  36.   // 如果其中一个人不在名单内，则返回 NA
  37.   if (!person1 || !person2) {
  38.     return 'NA'
  39.   }
  41.   let sex1 = ''
  42.   let sex2 = ''
  43.   // 获取性别
  44.   if (person1.familyName.endsWith('sson')) {
  45.     sex1 = 'male'
  46.   } else if (person1.familyName.endsWith('sdottir')) {
  47.     sex1 = 'female'
  48.   }
  50.   if (person2.familyName.endsWith('sson')) {
  51.     sex2 = 'male'
  52.   } else if (person2.familyName.endsWith('sdottir')) {
  53.     sex2 = 'female'
  54.   }
  56.   // 如果两个人为同性，则返回 Whatever
  57.   if (sex1 === sex2) {
  58.     return 'Whatever'
  59.   }
  61.   // 获取两个人的祖先数组（循环）
  62.   let ancestors1 = getAncestors(person1, data)
  63.   let ancestors2 = getAncestors(person2, data)
  65.   console.log(ancestors1, ancestors2)
  66.   // 判断是否有公共祖先
  67.   let hasCommonAncestor = false
  68.   for (let ancestor1 of ancestors1) {
  69.     for (let ancestor2 of ancestors2) {
  70.       if (ancestor1 === ancestor2) {
  71.         hasCommonAncestor = true
  72.         break
  73.       }
  74.     }
  75.   }
  77.   // 如果有公共祖先，则返回 No；否则返回 Yes
  78.   if (hasCommonAncestor) {
  79.     return 'No'
  80.   } else {
  81.     return 'Yes'
  82.   }
  83. }
  85. module.exports = marry

9.这是一个”浏览器“

这个题目，第四问暂时我真没想通哪里出问题了，等解决了再更新。

代码：

  1. 'use strict'
  2. class Tab {
  3.   // 构造方法
  4.   constructor(id) {
  5.     // 获取元素
  6.     this.main = document.querySelector(id)
  7.     this.add = this.main.querySelector('.tabadd')
  8.     this.ul = this.main.querySelector('.fisrstnav ul')
  9.     this.fsection = this.main.querySelector('.tabscon')
  10.     this.init()
  11.   }
  12.   // 初始化
  13.   init() {
  14.     this.updateNode()
  15.     // init初始化操作让相关元素绑定事件
  16.     this.add.onclick = this.addTab.bind(this)
  17.     for (var i = 0; i < this.lis.length; i++) {
  18.       this.lis[i].index = i
  19.       this.lis[i].onclick = this.toggleTab.bind(this.lis[i], this)
  20.       this.remove[i].onclick = this.removeTab.bind(this.remove[i], this)
  21.       this.spans[i].ondblclick = this.editTab
  22.       this.sections[i].ondblclick = this.editTab
  23.     }
  24.   }
  25.   // 更新所有的li和section
  26.   updateNode() {
  27.     this.lis = this.main.querySelectorAll('li')
  28.     this.remove = this.main.querySelectorAll('.icon-guanbi')
  29.     this.sections = this.main.querySelectorAll('section')
  30.     this.spans = this.main.querySelectorAll('.content')
  31.   }
  32.   // 1.切换功能
  33.   toggleTab(tab) {
  34.     // 调用 Tab 类的 clearClass 方法，清空所有标签页及其内容页的类名
  35.     tab.clearClass()
  36.     // 给点击的标签页和对应的内容页添加选中状态的类名
  37.     this.classList.add('liactive')
  39.     // 获取点击标签页的索引
  40.     const activeIndex = Array.from(tab.lis).indexOf(this)
  42.     // 切换内容页的选中状态类名
  43.     for (let i = 0; i < tab.sections.length; i++) {
  44.       if (i === activeIndex) {
  45.         tab.sections[i].classList.add('conactive')
  46.       } else {
  47.         tab.sections[i].classList.remove('conactive')
  48.       }
  49.     }
  50.   }
  52.   // 2.清空所有标签页及其内容页类名
  53.   clearClass() {
  54.     for (var i = 0; i < this.lis.length; i++) {
  55.       this.lis[i].className = ''
  56.       this.sections[i].className = ''
  57.     }
  58.   }
  59.   // 3.添加标签页
  60.   addTab() {
  61.     this.clearClass() // 清空所有标签页及其内容页的类名
  63.     // 创建新的标签页和内容页
  64.     const newTabIndex = this.lis.length
  65.     const newTabContent = `标签页${newTabIndex + 1}`
  66.     const newSectionContent = `标签页${newTabIndex + 1}的内容`
  68.     // 创建新的标签页
  69.     const newLi = document.createElement('li')
  70.     newLi.innerHTML = `
  71.     <span class="content">${newTabContent}</span>
  72.     <span class="iconfont icon-guanbi">
  73.       <span class="glyphicon glyphicon-remove"></span>
  74.     </span>
  75.   `
  76.     this.ul.appendChild(newLi)
  78.     // 创建新的内容页
  79.     const newSection = document.createElement('section')
  80.     newSection.innerText = newSectionContent
  81.     this.fsection.appendChild(newSection)
  83.     // 更新节点
  84.     this.updateNode()
  86.     // 给新标签页和内容页添加选中状态的类名
  87.     this.lis[newTabIndex].classList.add('liactive')
  88.     this.sections[newTabIndex].classList.add('conactive')
  90.     // 重新绑定事件处理程序
  91.     this.lis[newTabIndex].onclick = this.toggleTab.bind(this.lis[newTabIndex], this)
  92.     this.remove[newTabIndex].onclick = this.removeTab.bind(this.remove[newTabIndex], this)
  93.   }
  95.   //删除节点
  96.   removeTab(tab) {
  97.     // 找到点击删除按钮对应的标签页及其内容页的索引
  98.     const currentIndex = Array.from(tab.remove).indexOf(this)
  99.     const isActive = tab.lis[currentIndex].classList.contains('liactive')
  101.     // 删除标签页和内容页
  102.     tab.ul.removeChild(tab.lis[currentIndex])
  103.     tab.fsection.removeChild(tab.sections[currentIndex])
  105.     // 更新节点
  106.     tab.updateNode()
  108.     // 若删除的标签页是当前选中的标签页
  109.     if (isActive) {
  110.       // 若删除的是最后一个标签页
  111.       if (currentIndex === tab.lis.length) {
  112.         // 则选中上一个标签页
  113.         tab.toggleTab.call(tab.lis[currentIndex - 1], tab)
  114.       } else {
  115.         // 否则选中下一个标签页
  116.         tab.toggleTab.call(tab.lis[currentIndex], tab)
  117.       }
  118.     }
  119.   }
  121.   // 5.修改功能
  122.   editTab() {
  123.     var str = this.innerHTML
  124.     window.getSelection ? window.getSelection().removeAllRanges() : document.Selection.empty()
  125.     this.innerHTML = '<input type="text" />'
  126.     var input = this.children[0]
  127.     input.value = str
  128.     input.select() //让文本框里的文字处于选定状态
  130.     // 输入框失焦事件
  131.     input.onblur = function () {
  132.       this.parentNode.innerHTML = this.value
  133.     }
  134.   }
  135. }
  136. var tab = new Tab('#tab')

10.趣味加密解密

能力有限，真写不出来了 😭😭😭😭😭😭😭😭😭😭

总结

这次的模拟题是真的狠，后面的四道题难度简直是咔咔涨 不过真到比赛了，估计也没时间写后面的题目。😢

标签： 蓝桥杯 前端 javascript
本文转载自: https://blog.csdn.net/m0_64642443/article/details/136659768
版权归原作者 不会写代码 只会CV 所有， 如有侵权，请联系我们删除。
登录后发布评论

“第十五届蓝桥杯（Web 应用开发）模拟赛 3 期-大学组（被题目描述坑惨了）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？