第十三届蓝桥杯大赛Web省赛专科组赛题解析

01 水果拼盘(5 分)

/* TODO：待补充代码 */
#pond {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

02 展开你的扇子 (5 分)

/*TODO：请补充 CSS 代码*/
/* 逆时针 */
#box:hover #item1 {
  transform: rotate(-60deg);
}

#box:hover #item2 {
  transform: rotate(-50deg);
}

#box:hover #item3 {
  transform: rotate(-40deg);
}

#box:hover #item4 {
  transform: rotate(-30deg);
}

#box:hover #item5 {
  transform: rotate(-20deg);
}

#box:hover #item6 {
  transform: rotate(-10deg);
}

/* 顺时针 */

#box:hover #item7 {
  transform: rotate(10deg);
}

#box:hover #item8 {
  transform: rotate(20deg);
}

#box:hover #item9 {
  transform: rotate(30deg);
}

#box:hover #item10 {
  transform: rotate(40deg);
}

#box:hover #item11 {
  transform: rotate(50deg);
}

#box:hover #item12 {
  transform: rotate(60deg);
}

03 健身大调查(10 分)

function formSubmit() {
  // TODO：待补充代码
  // 获取需要操作的节点
  const H = document.querySelector('input[name=height]')
  const W = document.querySelector('input[name=weight]')
  const F = document.querySelector('#quescontent')
  const R = document.querySelector('#result')
  const M = document.querySelectorAll('input[name=male]')
  const P = document.querySelectorAll('input[name=place]')
  // 将表单隐藏
  F.style.display = 'none'
  // 将数据显示
  R.style.display = 'block'
  // 处理性别
  let sex = getOptions(M)[0] === 0 ? '男' : '女'
  // 处理地点
  let place = placeToStr(getOptions(P))
  // 回显数据
  R.innerHTML += `<br>身高${H.value}cm，体重${W.value}kg，性别${sex}，会在${place}锻炼。`
}

// 获取用户选项
function getOptions(list) {
  let result = []
  list.forEach(e => {
    if (e.checked) result.push(e.value)
  })
  return result
}

// 遍历地点
function placeToStr(o) {
  let place = ['公园', '健身房', '户外']
  let result = []
  o.forEach(e => {
    result.push(place[e - 1])
  })
  return arrayFormat(result)
}

// 将地点格式
function arrayFormat(arr) {
  let result = ''
  arr.forEach(e => {
    result += e + '、'
  })
  return result.substring(0, result.length - 1)
}

04 和手机相处的时光(10 分)

let chartDom = document.querySelector("#main"); //获取dom
let myChart = echarts.init(chartDom); //初始化echarts实例
let option = { //设置图表的配置项
    title: { //标题
        text: "一周的手机使用时长", //标题文本
    },
    xAxis: { //x轴
        type: "category", //类型--类目轴
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: { //y轴
        type: "value", //类型--数值轴
    },
    series: [{ //数据
        data: [2.5, 2, 2.6, 3.2, 4, 6, 5], //数据
        type: "line", //类型
    },{ //数据
        data: [3, 5, 2, 4, 2, 5, 6], //数据
        type: "line", //类型
    },],
};
myChart.setOption(option); //设置option

05 请到下一步 (15分)

/*TODO：请补充代码*/
var current_form, next_form, previous_form // 表单域
// 点击下一页的按钮
$('.next').click(function () {
  // 获取当前显示的表单
  current_form = $(this).parent()
  // 通过当前显示的表单获取下一个表单
  next_form = current_form.next()
  // 控制下一个表单显示，其他表单隐藏
  next_form.show().siblings('fieldset').hide()
  // 获取当前显示表单的下标
  const index = next_form.index() - 1
  // 设置步骤条高亮
  $('#progressbar li').eq(index).addClass('active')
})
// 点击返回按钮
$('.previous').click(function () {
  // 获取当前显示的表单
  current_form = $(this).parent()
  // 通过当前显示的表单获取上一个表单
  previous_form = current_form.prev()
  // 控制上一个表单显示，其他表单隐藏
  previous_form.show().siblings('fieldset').hide()
  // 获取当前显示表单的下标
  const index = previous_form.index() - 1
  // 设置步骤条高亮
  $('#progressbar li').eq(index).addClass('active').next().removeClass('active')
})
// 点击提交按钮
$('.submit').click(function () {
  alert('提交成功')
})

06 冬奥大抽奖 (15 分)

// TODO：请完善此函数
function rolling() {
    time++; // 转动次数加1
    clearTimeout(rollTime);
    rollTime = setTimeout(() => {
        window.requestAnimationFrame(rolling); // 进行递归动画
    }, speed);

    let $selected = ".li" + index; // 定义选中的奖品
    $($selected).addClass("active").siblings().removeClass("active");

    // time > times 转动停止
    if (time > times) {
        // 显示抽奖结果
        $("#award").text('恭喜您抽中了' + $($selected).text() + '!!!');
        // 重置选择器索引值
        index = 1;
        clearInterval(rollTime);
        time = 0;
        return;
    }
    // 更新选择器索引值
    index = index > 8 ? 1 : ++index;
}

07 蓝桥知识网(20 分)

主要考使用html和css进行网页搭建，此处省略

08 谁最长 (20 分)

/**
 * 封装函数，传入任意数量的数组，返回长度最大的数组集合
 */
const getMaxArrays = (...arrays) => {
  // TODO：待补充代码
  // 获取所有参数的长度
  let lengths = toLength(...arrays)
  // 获取参数长度的最大值
  let max = getMax(lengths)
  // 声明结果数组
  let result = []
  // 循环判断数组长度
  for (let i = 0; i < arrays.length; i++){
    // 判断当前数组的长度是否和最大值相等
    if (arrays[i].length === max) {
      // 相等的话添加到结果数组中
      result.push(arrays[i])
    }
    // 如果某个参数不是数组或者所有数组的长度相同直接返回空数组
    if (!Array.isArray(arrays[i]) || result.length === arrays.length) {
      return []
    }
  }
  // 返回结果（如果结果只有一个数组元素的话，则返回它本身）
  return result.length === 1 ? result[0] : result
};

// 获取参数数组的长度
function toLength(...arrays) {
  let lengths = []
  arrays.forEach(e => {
    lengths.push(e.length)
  })
  return lengths
}

// 获取最大值（获取最长数组）
function getMax(array) {
  let max = array[0]
  array.forEach(e => {
    max = max < e ? e : max
  })
  return max
}

09 输入搜索联想 (25 分)

<body>
  <div id="app">
    <!-- TODO：请在下面实现需求 -->
    <span>搜索名字: </span>
    <input placeholder="输入要搜索的名字" v-model="searchQuery" />
    <table>
      <thead>
        <tr>
          <td v-for="col in columns">{{col | toUpper}}</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="entry in list">
          <td v-for="col in columns">{{entry[col]}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>
<script>
  // TODO：请在下面实现需求
  new Vue({
    el: "#app",
    // 注意：请勿修改 data 选项中的数据！！！
    data: {
      searchQuery: "",
      columns: ["name", "gender", "age"],
      data: [...], // 笔记中数据省略
    },
    // 计算属性
    computed: {
      list () {
        return this.searchQuery === '' ? this.data : this.data.filter(e => {
          // 将name 与 searchQuery 全部转小写进行对比
          return e.name.toLowerCase().includes(this.searchQuery.toLowerCase());
        })
      }
    },
    filters: {
      // 过滤器函数实现表头首字母大写
      toUpper (v) {
        return v.charAt(0).toUpperCase() + v.slice(1, v.length)
      }
    }
  });
</script>

10 课程列表 (25 分)

let pageNum = 1 // 当前页码，默认页码1
let maxPage // 最大页数
let dataList = [] // 数据列表
let offset = 0 // 偏移量

// TODO：待补充代码
// 发送请求获取数据
axios.get('./js/carlist.json').then(res => {
  dataList = res.data
  // 最大页数
  maxPage = Math.ceil(dataList.length / 5)
  // 渲染页面
  renderData()
})

// 点击上一页
let prev = document.getElementById('prev')
prev.onclick = function () {
  // TODO：待补充代码
  pageNum === 1 ? (pageNum = 1) : pageNum--
  pageNum === 1 ? (offset = 0) : (offset -= 5)
  renderData()
}
// 点击下一页
let next = document.getElementById('next')
next.onclick = function () {
  // TODO：待补充代码
  pageNum === maxPage ? (pageNum = maxPage) : pageNum++
  pageNum === maxPage ? (offset = (pageNum - 1) * 5) : (offset += 5)
  renderData()
}

// 渲染页面
function renderData() {
  // 清空页面原有数据
  document.querySelectorAll('.list-group').forEach(item => {
    item.remove()
  })
  // 渲染数据
  for (let i = offset; i < offset + 5; i++) {
    if (i >= dataList.length) break
    elementTemplate(dataList[i])
  }
  // 更新按钮状态
  pageNum === 1 ? prev.classList.add('disabled') : prev.classList.remove('disabled')
  pageNum === maxPage ? next.classList.add('disabled') : next.classList.remove('disabled')
  // 将总页数和页码渲染到页面
  document.getElementById('pagination').innerText = `共${maxPage}页，当前第${pageNum}页`
}

// 渲染模板
function elementTemplate(data) {
  //创建元素盒子
  const listGroup = document.createElement('div')
  listGroup.className = 'list-group'
  // 创建a标签
  const a = document.createElement('a')
  a.href = '#'
  a.className = 'list-group-item list-group-item-action'
  // 创建子级div
  const div = document.createElement('div')
  div.className = 'd-flex w-100 justify-content-between'
  // 创建子级h5
  const h5 = document.createElement('h5')
  h5.className = 'mb-1'
  // 创建子级small
  const small = document.createElement('small')
  // 创建子级p
  const p = document.createElement('p')
  p.className = 'mb-1'
  // 将子级添加到父级
  div.appendChild(h5)
  div.appendChild(small)
  a.appendChild(div)
  a.appendChild(p)
  listGroup.appendChild(a)
  // 渲染数据
  // 渲染价格数据
  small.innerText = data.price
    ? data.price.toString().slice(0, data.price.toString().length - 2) + '.00元'
    : 'NaN元'
  // 渲染标题数据
  h5.innerText = data.name
  // 渲染描述数据
  p.innerText = data.description
  // 将盒子添加到父级
  document.getElementById('list').appendChild(listGroup)
}