第十四届蓝桥杯（Web 应用开发）模拟赛 2 期-职业院校组题解

第十四届蓝桥杯（Web 应用开发）模拟赛 2 期-职业院校组题解

友情链接

• 第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-大学组
• 第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-职业院校组
• 第十四届蓝桥杯（Web 应用开发）模拟赛 2 期-大学组
• 第十三届蓝桥杯大赛（Web 应用开发）国赛-职业院校组
• 第十三届蓝桥杯大赛（Web 应用开发）省赛-职业院校组

01 凭空消失的TA

<script src="./element-ui-2.15.10/index.js">script>

02 用户名片

/* 第一种：通过绝对定位实现 */
.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 第二种：通过弹性盒实现 */
body,
.user-card{
  display: flex;
  justify-content: center;
  align-items: center;
}

03 偷梁换柱

// 第一种：通过 Object.defineProperty() 实现
let age = 0
Object.defineProperty(person, 'age', {
  get() {
    return age
  },
  set(val) {
    if (val < 0) val = 0
    if (val > 150) val = 150
    age = val
  },
})
// 第二种：通过 Proxy 实现
person = new Proxy(person, {
  get(target, key) {
    if (target[key] < 0) return 0
    if (target[key] > 150) return 150
    return target[key]
  }
})

04 大电影

// TODO：待补充代码
$('.card-body-option-favorite img').click(function () {
  this.src = this.src.includes('hollow') ? './images/solid.svg' : './images/hollow.svg'
  if (this.src.includes('solid')) {
    $('#toast__container').show()
    setTimeout(() => $('#toast__container').hide(), 2000)
  }
})
$('.toast__close').click(() => $('#toast__container').hide())

05 粒粒皆辛苦

// TODO: 待补充代码
axios.get('./data.json').then(res => {
  // 获取数据
  const data = res.data.data
  // 初始化数据数组
  const year = ['全部']
  const corn = ['玉米']
  const wheat = ['小麦']
  const soybean = ['大豆']
  const potato = ['马铃薯']
  // 解析获取到的数据
  for (k in data) {
    year.push(k) // 解析年份
    for (k2 in data[k]) {
      if (k2 === 'corn') corn.push(data[k][k2]) // 解析玉米数据
      if (k2 === 'wheat') wheat.push(data[k][k2]) // 解析小麦数据
      if (k2 === 'potato') potato.push(data[k][k2]) // 解析马铃薯数据
      if (k2 === 'soybean') soybean.push(data[k][k2]) // 解析大豆数据
    }
  }
  // 将解析的数据合并
  const source = new Array(year, wheat, soybean, potato, corn)
  // 修改图表数据
  option.dataset.source = source
  // 重新设置图标
  myChart.setOption(option)
})

06 618 活动

此题略…

07 绝美宋词

<div class="search-form">
  <input type="text" id="search" class="search" placeholder="词牌名 词句 词人" v-model="keyword" />
  <ul class="suggestions">
    <li v-for="item in dataList">
      <span class="poet" v-html="highlight(item.poetry_content)">span>
      <span class="title">
        <span v-html="highlight(item.title)">span>
        -
        <span v-html="highlight(item.author)">span>
      span>
    li>
  ul>
div>
<script>
  let vm = new Vue({
    el: '#app',
    // TODO：待补充代码
    data () {
      return {
        keyword: '',
        list: [],
      }
    },
    mounted () {
      axios.get('./data.json').then(res => this.list = res.data)
    },
    computed: {
      dataList () { // 过滤符合条件的数据
        return this.keyword ? this.list.filter((e) =>
          e.poetry_content.includes(this.keyword) ||
          e.title.includes(this.keyword) ||
          e.author.includes(this.keyword)
        ) : []
      },
    },
    methods: {
      highlight (val) { // 返回具有高亮效果的html结构
        // $& 占位符，代表插入匹配的子串
        return val.replaceAll(this.keyword, `$&`)
      }
    },
  })
script>

08 乾坤大挪移心法

function mentalMethod(...args) {
  // TODO 待补充代码
  if (args.length) return mentalMethod
  return '战胜峨眉,武当,少林'
}

09 不能说的秘密

function generatePassword(lower, upper, number, symbol, length) {
  //TODO：待补充代码
  let result = ''
  while (true) {
    if (upper) result += generateUpper()
    if (result.length === length) break
    if (lower) result += generateLower()
    if (result.length === length) break
    if (number) result += generateNumber()
    if (result.length === length) break
    if (symbol) result += generateSymbol()
    if (result.length === length) break
  }
  return result
}

// 生成26个大写字母数组
const uppers = Array.from(Array(26), (e, i) => String.fromCharCode(65 + i))
// 生成26个小写字符数组
const lowers = uppers.map(e => e.toLowerCase())
// 生成 0 - 9 数组
const numbers = Array.from(Array(10), (e, i) => i)
// 生成特殊字符数组
const symbols = '!@#$%^&*(){}[]=<>/,.'.split('')

// 根据传入的参数生成对应范围随机数
function ran(length) {
  return Math.floor(Math.random() * length)
}
// 随机生成一个大写字母
function generateLower() {
  return lowers[ran(lowers.length)]
}
// 随机生成一个小写字母
function generateUpper() {
  return uppers[ran(uppers.length)]
}
// 随机生成一个数字
function generateNumber() {
  return numbers[ran(numbers.length)]
}
// 随机生成一个特殊字符
function generateSymbol() {
  return symbols[ran(symbols.length)]
}

10 收快递了

function findRegion(regions, regionName) {
  let result = null
  for (const region of regions) {
    if (region.name === regionName) result = [region.name]
    if (Boolean(region.children.length)) {
      const result = findRegion(region.children, regionName)
      const isAdd = Boolean(result ? result.length : result)
      if (isAdd) return [region.name, ...result]
    }
  }
  return result
}