【蓝桥杯Web】第十五届蓝桥杯（Web 应用开发）模拟赛 2 期 | 全部题解

感觉蓝桥杯的模拟赛一次比一次难了

制作不易，代码都是纯手敲，觉得有帮助的伙伴们记得点个赞评论一下，谢谢大家支持

话不多说直接上答案

目录

1、想不相等

2、三行情书

3、电影院在线订票

4、老虎机

5、星际通讯

6、蓝桥杯排位赛

7、拼出一个未来

8、超能英雄联盟

HeroList.js

TeamList.js

9、万能合成台

10、账户验证

1、想不相等

这里有个坑，题意说如果不符合要求要抛出错误’…’，实际上只需要return即可，不需要用到throw语句,当时这里卡了有一会

/** * @param {string} val * @return {Object} */var expectFn = function(val) {// TODOreturn{toBe(_val){return val === _val || 'Not Equal'},notToBe(_val){return val !== _val || 'Equal'}}};// console.log(expectFn(5).toBe(5)); // true// console.log(expectFn(5).notToBe(5)); // "Equal"// 检测需要，请勿删除module.exports = expectFn;

2、三行情书

这题要注意的是，span标签原本为行内元素，无法设置宽高，需要将span转换为块级元素

span {font-size: 20px;color: #837362;/* TODO：补充下面的代码 */display: block;width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}p {color: #837362;/* TODO：补充下面的代码 */display: -webkit-box;-webkit-box-orient: vertical;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 3;}

3、电影院在线订票

/* TODO: 1. 完成数据请求，生成电影名，价格以及座位情况2. 绑定点击事件，实现订票功能 */// 获取座位区域节点const seatAreaNode = document.getElementById("seat-area");// 获取电影名节点const movieNameNode = document.getElementById("movie-name");// 获取电影票价节点const moviePriceNode = document.getElementById("movie-price");// 获取已订电影票数量节点const count = document.getElementById("count");// 获取已订电影票总价节点const total = document.getElementById("total");axios('./data.json').then(res=>{let {data} = resconsole.log(data);movieNameNode.innerText = data.namemoviePriceNode.innerText = data.pricelet tpl = ``data.seats.map(item=>{tpl+=`{{replace}}`let _tpl = ''item.map(_item=>{_tpl+=_item" />`:``})tpl = tpl.replace('{{replace}}',_tpl)})seatAreaNode.innerHTML = tpl;[...document.getElementsByClassName('seat')].map(node=>{if(![...node.classList].includes('occupied')){node.onclick=function(){if([...node.classList].includes('selected')){node.classList.remove('selected')count.innerHTML = parseInt(count.innerHTML) - 1total.innerHTML = parseInt(total.innerHTML) - 20}else{node.classList.add('selected')count.innerHTML = parseInt(count.innerHTML) + 1total.innerHTML = parseInt(total.innerHTML) + 20}}}})})

4、老虎机

这题如果读懂题意还是很简单的，要r1、r2和r3减1即可

// GetResult 中奖结果函数，r1,r2,r3 为最后图片停留位置，以第一列为例，最终显示的元素是 sevenFirst 下的第 r 个 li 元素。GetResult(r1, r2, r3) {// TODO 待补充代码let o1 = document.getElementById('sevenFirst').getElementsByTagName('li'),o2 = document.getElementById('sevenSecond').getElementsByTagName('li'),o3 = document.getElementById('sevenThird').getElementsByTagName('li'),oTip = document.getElementsByClassName('textPanel')[0]if(o1[r1-1].dataset.point == o2[r2-1].dataset.point == o3[r3-1].dataset.point){oTip.innerHTML ='恭喜你，中奖了'}else{oTip.innerHTML ='很遗憾，未中奖'}}}

5、星际通讯

这题难度还是比较简单的，因为codonTable里的key都是三位数的

/** * @param {string} alienMessage 外星人的密文 * @return {string}翻译结果 */const translate = (alienMessage) => {// TODO：待补充代码if(!alienMessage)return ""if(alienMessage.length%3!=0)return"无效密语"let strArr = [],_str = '',result = ''for(let strIdx in alienMessage){_str+=alienMessage[strIdx]if(_str == 'XXI')breakif(_str.length == 3){strArr.push(_str)_str = ''}}result+=(strArr.map(item=>codonTable[item])+'').replaceAll(',','')if(result=='undefined' || !result)return "无效密语"return result};

6、蓝桥杯排位赛

考察的是echart，直接上答案

const { createApp, ref, onMounted } = Vue;const app = createApp({setup() {const chartsData = ref([]);onMounted(() => {// TODO:待补充代码 请求数据，并正确渲染柱形图和地图fetch('./mock/map.json').then(res=>res.json()).then(res=>{let schoolList = []res.map(item=>{item.school_power.map((item,idx)=>schoolList.push(item))})schoolList.sort((a,b)=>b.power-a.power)schoolList.length = 10showChartBar(schoolList);showChinaMap(res);})});// 展示柱状图const showChartBar = (schoolList) => {const myChart = echarts.init(document.getElementById('chart'));let data = chartsData.value.map((item, index) => {return item.school_power;});let result = data.flat(1).sort((a, z) => {return z.power - a.power;});let arr = result.slice(0, 10);let school = arr.map((item) => {return item.name;});let power = arr.map((item) => {return item.power;});// 指定配置和数据const option = {xAxis: {type: 'category',axisLabel: { interval: 0, rotate: 40 },// TODO：待修改柱状图 x 轴数据 -> 前 10 学校名称data: schoolList.map(item=>item.name),},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true,},yAxis: {type: 'value',boundaryGap: [0, 0.01],},series: [{// TODO：待修改 柱状图 y 轴数据->学校战力值data: schoolList.map(item=>item.power),type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)',},itemStyle: {color: '#8c7ae6',},},],};// 把配置给实例对象myChart.setOption(option);// 根据浏览器大小切换图表尺寸window.addEventListener('resize', function () {myChart.resize();});};// 展示地图const showChinaMap = (data) => {const chinaMap = echarts.init(document.getElementById('chinaMap'));// 进行相关配置const mapOption = {tooltip: [{backgroundColor: '#fff',subtext: 'aaa',borderColor: '#ccc',padding: 15,formatter: (params) => {return (params.name +'热度值:' +params.value +'
' +params.data.school_count +'所学校已加入备赛');},textStyle: {fontSize: 18,fontWeight: 'bold',color: '#464646',},subtextStyle: {fontSize: 12,color: '#6E7079',},},],geo: {// 这个是重点配置区map: 'china', // 表示中国地图label: {normal: {show: false, // 是否显示对应地名},},itemStyle: {normal: {borderColor: 'rgb(38,63,168)',borderWidth: '0.4',areaColor: '#fff',},emphasis: {//鼠标移入的效果areaColor: 'rgb(255,158,0)',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: 'rgba(0, 0, 0, 0.5)',},},},visualMap: {show: true,left: 'center',top: 'bottom',type: 'piecewise',align: 'bottom',orient: 'horizontal',pieces: [{gte: 80000,color: 'rgb(140,122,230)',},{min: 50000,max: 79999,color: 'rgba(140,122,230,.8)',},{min: 30000,max: 49999,color: 'rgba(140,122,230,.6)',},{min: 10000,max: 29999,color: 'rgba(140,122,230,.4)',},{min: 1,max: 9999,color: 'rgba(140,122,230,.2)',},],textStyle: {color: '#000',fontSize: '11px',},},series: [{type: 'map',geoIndex: 0,// TODO:待修改 地图对应数据data,},],};// 把配置给实例对象chinaMap.setOption(mapOption);};return {chartsData,showChartBar,showChinaMap,};},});app.mount('#app');

7、拼出一个未来

// 定义拖放事件的处理函数function drop(event) {// 检查是否拖动的拼图块不是当前目标拼图块// draggedPiece 被拖动的拼图块元素。this 目标位置的拼图块元素。if (draggedPiece !== this) { // TODO：待补充代码let saveArr = [[draggedPiece.children[0].src,draggedPiece.children[0].dataset.id],[this.children[0].src,this.children[0].dataset.id]]draggedPiece.children[0].src = saveArr[1][0]draggedPiece.children[0].dataset.id = saveArr[1][1]this.children[0].src = saveArr[0][0]this.children[0].dataset.id = saveArr[0][1]let imgDataIdList = [...document.getElementById('puzzle-container').getElementsByTagName('img')].map(item=>item.dataset.id)console.log(imgDataIdList);if(imgDataIdList == '1,2,3,4,5,6,7,8,9'){document.getElementById('success-message').classList.remove('hide')document.getElementById('success-message').classList.add('show')}else{document.getElementById('success-message').classList.remove('show')document.getElementById('success-message').classList.add('hide')}}// 重置正在拖动的拼图块draggedPiece = null;}

8、超能英雄联盟

这里我只改动了两个地方

HeroList.js

// TODO:补全代码，实现目标效果const HeroList = {template: `
可选英雄
{{item.name}}{{item.ability}}{{item.strength}}{{item.btnInfo.text}}{{item.btnInfo.text}}
`,setup() {let store = useHeroStore(),list = ref([])axios('./js/heroes.json').then(({data})=>{data.map(item=>{item.btnInfo = {text:'添加至队伍',disabled:false}})list.value = datastore.heroes = list.value})return{list,clickEvent(idx){list.value[idx].btnInfo.text = '已添加'list.value[idx].btnInfo.disabled = true}}},};// TODOEnd

TeamList.js

// TODO:补全代码，实现目标效果const TeamList = {template: `
我的队伍
{{item.name}}{{item.strength}}移除
按实力排序
当前队伍战斗力：{{count}} 
`,setup() {let store = useHeroStore(),list = Vue.ref([]),count = Vue.ref(0)Vue.watch(()=>store.heroes,nv=>{count.value = 0list.value = nv.filter(item=>{if(item.btnInfo.disabled){count.value += item.strengthreturn true}})},{deep:true})return {list,count,removeHero(item,idx){store.heroes[item.id-1].btnInfo.text = '添加至队伍里'store.heroes[item.id-1].btnInfo.disabled = false},sortStrength(){list.value.sort((a,b)=>b.strength - a.strength)},}},};// TODOEnd

9、万能合成台

这题的含金量还是比较高，考察了很多方面的知识点

这题我选择用了字符串来解

// state 辅助记录当前合成栏内容的全局变量let state = [['', '', ''],['', '', ''],['', '', '']];let targetItemName = ''; //辅助记录当前合成栏的可能目标合成物品每次 onPickItem 执行后，前端界面会根据此全局变量的值更改图标 /** 检查当前的合成配方是否能够合成某个物品。如果配方合法，返回一个合成的目标物品名，否则返回一个空字符串。 * @param {*} map 为一个 3*3 的二维数组，第一维为物品的每一横行，第二维为每一横行物品下的每个纵列 */ function checkRecipe(map) {// TODO：待补充代码let rule = structuredClone(window.recipes)//用字符串来玩这道题let rMap = map.map(item=>{return (item+'').replaceAll(',',' ').trim()}),rRule = {},result = ''for (let key in rule) {rRule[key] = []for (let idx in rule[key]) {rRule[key][idx] = rule[key][idx].map(item=>(item+'').replaceAll(',',' ').trim())}}for(let key in rRule){for (const item of rRule[key]) {let _itemStr = ''//判断纵向是否拥有空位if((rMap+'')[0]==','){_itemStr = ','+item}else if((rMap+'')[(rMap+'').length-1]==','){_itemStr = item+','}else{_itemStr = item+''}if(_itemStr == rMap)result = key}}return result}/** 更新 state 中的物品位置 * @param {string} name为此次修改为的物品，可能为空字符串（通过右下角清空），也可能为物品 * @param {Array} pos 为一个两个元素的数字数组，分别指示物品的所在横行与所在纵列 */function onPickItem(name, pos) {// TODO：待补充代码state[pos[0]-1][pos[1]-1] = nametargetItemName = checkRecipe(state) || '';}

10、账户验证

这题有个坑，最后清空了输入框的值依旧不给过，然后换了一种思路就可以了，上代码：

{"imports":{"vue-demi":"./js/index.mjs","vue":"./js/vue.esm-browser.prod.js","pinia":"./js/pinia.esm-browser.js"}}使用手机号登录
输入手机号码
已阅读并同意服务协议和隐私保护指引
下一步
输入短信验证码
已向{{handlePhoneVal}}发送验证码
重新发送
验证成功！5s后将自动跳转
import { createPinia, defineStore } from 'pinia'const { createApp, reactive, toRefs,provide,inject,ref,watch } = Vueconst { ElNotification } = ElementPlusconst app = createApp({setup() {let data = reactive({showName: "phone"})// TODO:补全代码实现目标需求//定义全局通信数据池const code = ref([])const phoneVal = ref('')const createCode = function(){//随机生成二维码let res = ''function *_create(){let count = 0while(++count {let res = ''for(let idx in num){if(idx>2 && idx{//将代码放入宏队列以此获取dom，用onMounted也行let oCodeIptList = [...document.getElementsByClassName('code')]oCodeIptList[0].focus() //第一个默认聚焦oCodeIptList.map(item=>{item.oninput=function(){if(item.value){ //如果输入了值就聚焦下一个，否则聚焦上一个 item" />item.value = '') //清空输入框;[...document.getElementsByClassName('code')][0].focus() //重新聚焦第一个}}}})return {handlePhoneVal,resentCode(){code.value = createCode()ElNotification({title: '发送成功',message: '您在验证码为'+code.value,type: 'success',})}}}})app.component("success", {template: "#success"})app.mount('#app')