【蓝桥杯Web】第十五届蓝桥杯（Web 应用开发）模拟赛 2 期 | 全部题解_网站优化分享

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+=`{{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) - 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: `
  
    可选英雄
    
      
        {{item.name}}
        {{item.ability}}
        {{item.strength}}
        
        
      
    
  
  `,
  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: `
  
      我的队伍
      
        
          {{item.name}}
          {{item.strength}}
          
        
      
      
      当前队伍战斗力：{{count}} 
  
  `,
  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、账户验证

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

上一篇：JS快速入门

下一篇：Webapck 解决：[webpack-cli] Error: Cannot find module ‘vue-loaderlibplugin‘ 的问题