第十三届蓝桥杯国赛 Web 前端组（大学组） 真题练习及答案解析

【真题练习】分一分

考点：数组方法
思路：利用splice()方法

/**
 * @param {Object} oldArr
 * @param {Object} num
 * */
const splitArray = (oldArr, num) => {
   
  // TODO：请补充代码实现功能
  let arr = []
  while (oldArr.length > 0) {
   
    arr.push(oldArr.splice(0,num))
  }
  return arr
};
module.exports = splitArray; // 检测需要，请勿删除

---

【真题练习】新鲜的蔬菜

考点：flex布局
思路：照着写就行

/* TODO：待补充代码 */
.box{
   
  display: flex;
}
#box1{
   
  justify-content: center;
  align-items: center;
}
#box2{
   
  justify-content: space-between;
}
#box2 .item:last-child{
   
  align-self: flex-end;
}
#box3 {
   
   justify-content: space-between;  /* 不加这个不能pass，有点玄学*/
} 
#box3 .item:nth-child(2){
   
  align-self: center;
}
#box3 .item:nth-child(3){
   
  align-self: flex-end;
}

---

【真题练习】水果消消乐

考点： DOM操作
思路：1 先做需求：隐藏开始按钮，方格上的图片显示后又隐藏。 2 再做第一次点击图片翻转效果。 3 做第二次点击的逻辑判断，若水果相同则，进行消除，加分操作，水果不同，进行隐藏，减分操作。

// TODO：请补充代码
const startBtn = document.querySelector("#start")
const imgList = document.querySelectorAll(".img-box img")
const boxList = document.querySelectorAll(".img-box")
const scoreEle = document.querySelector("#score")

const changeDisplay = (element, status) => element.style.display = status
// 隐藏开始按钮，方格上的图片显示后又隐藏
function start(){
   
    changeDisplay(startBtn,"none")
    // imgList转成数组之后用forEach遍历
    Array.from(imgList).forEach(img=>{
   
        changeDisplay(img,"block")
    })
    setTimeout(function(){
   
        Array.from(imgList).forEach(img=>{
   
            changeDisplay(img,"none")
        })
    },1000)
}


// 正式开始游戏
let score = 0  // 记录分数
let num = 0  // 记录是第一次翻牌还是第二次翻牌
let preId = ""
let preText = ""
function game(){
   

}
function startGame() {
   
    start()
    // 给每个box绑定点击事件,不能给img元素绑定点击事件，因为img元素是display:none
    Array.from(boxList).forEach(box=>{
   
        box.addEventListener("click",function(e){
   
            num++
            if(num === 1){
   
                // 如果第一次点击
                preText = e.target.firstElementChild.alt 
                preId = e.target.id
                changeDisplay(e.target.firstElementChild,"block")
            }else{
   
                // 第二次点击
                let nowText = e.target.firstElementChild.alt 
                let nowId = e.target.id
                changeDisplay(e.target.firstElementChild,"block")
                console.log(nowText,preText,nowId,preId)
                if (nowText === preText){
   
                    //水果相同 进行消除，加分操作
                    score += 2
                    // 这里得用不可见，要不然位置顺序会变
                    // 不可见仍然触发点击事件
                    setTimeout(function(){
   
                        document.getElementById(preId).style.visibility = "hidden"
                        document.getElementById(nowId).style.visibility = "hidden"
                        scoreEle.innerText = score
                        // 清空
                        num = 0
                        preId = ""
                        preText = ""
                    },1000)
                } else {
   
                     //水果不相同 进行隐藏，减分操作
                     score -= 2
                     // 隐藏图像
                     setTimeout(function(){
   
                        document.getElementById(preId).firstElementChild.style.display = "none"
                        document.getElementById(nowId).firstElementChild