职场和发展 前端 javascript vue.js html 【蓝桥杯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) {

// TODO

return{

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} = res

console.log(data);

movieNameNode.innerText = data.name

moviePriceNode.innerText = data.price

let tpl = ``

data.seats.map(item=>{

tpl+=`

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) - 1

total.innerHTML = parseInt(total.innerHTML) - 20

}else{

node.classList.add('selected')

count.innerHTML = parseInt(count.innerHTML) + 1

total.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')break

if(_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 = 10

showChartBar(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: `

`,

setup() {

let store = useHeroStore(),

list = ref([])

axios('./js/heroes.json').then(({data})=>{

data.map(item=>{

item.btnInfo = {

text:'添加至队伍',

disabled:false

}

})

list.value = data

store.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: `

`,

setup() {

let store = useHeroStore(),

list = Vue.ref([]),

count = Vue.ref(0)

Vue.watch(()=>store.heroes,nv=>{

count.value = 0

list.value = nv.filter(item=>{

if(item.btnInfo.disabled){

count.value += item.strength

return 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] = name

targetItemName = checkRecipe(state) || '';

}

10、账户验证

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

推荐文章