【真題練習】分一分

考點：數(shù)組方法
思路：利用splice()方法

/**
 * @param {Object} oldArr
 * @param {Object} num
 * */
const splitArray = (oldArr, num) => {
  // TODO：請補充代碼實現(xiàn)功能
  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轉成數(shù)組之后用forEach遍歷
    Array.from(imgList).forEach(img=>{
        changeDisplay(img,"block")
    })
    setTimeout(function(){
        Array.from(imgList).forEach(img=>{
            changeDisplay(img,"none")
        })
    },1000)
}


// 正式開始游戲
let score = 0  // 記錄分數(shù)
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
                    // 這里得用不可見，要不然位置順序會變
                    // 不可見仍然觸發(fā)點擊事件
                    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.style.display = "none"
                        scoreEle.innerText = score
                        // 清空
                        num = 0
                        preId = ""
                        preText = ""
                     },1000)
                }
            }
        })
    })
}

【真題練習】用什么來做計算 A

考點：js操作和eval()方法
思路：監(jiān)聽每個按鈕的點擊事件，維護一個字符串str，如果是 reset， sqrt， equal這三個按鈕的點擊事件，進行相應的處理，其他按鈕的點擊事件，則直接拼接str字符串，并更新視圖即可。

// TODO：請補充代碼
const formulaEle = document.querySelector("#formula")
const resultEle = document.querySelector("#result")


const btnList = document.querySelectorAll(".calc-button")

let str = ""

Array.from(btnList).forEach(btn=>{
    btn.addEventListener("click",function(){
        const id = btn.id 
        const s = btn.innerText.replace("x","*").replace("÷","/")
        console.log("click ...",id)
        switch (id) {
            case "reset":
                str = ""
                formulaEle.value = ""
                resultEle.value = ""
                return 
            case "sqrt":
                resultEle.value = Math.sqrt(eval(str));
                return 
            case "equal":
                resultEle.value = eval(str);
                return 
            default:
                str += s
                formulaEle.value = str
                break;
        }
    })
})

【真題練習】權限管理

考點：DOM操作
思路：首先獲取數(shù)據(jù)，然后根據(jù)數(shù)據(jù)驅動去更新DOM，每次點擊事件都去會改變userList的值，然后根據(jù)userList的狀態(tài)去更新頁面的變化。

$(function () {
  // 使用 ajax 獲取 userList.json 數(shù)據(jù)并渲染到頁面
  getData();
  // 為按鈕添加事件
  $("#add").click(function () {
    // TODO：補充代碼，實現(xiàn)功能
    let changeList = Array.from(leftSelectEle.selectedOptions).map(e=>({name:e.value}))
    changeAccess(true,changeList)
  });
  $("#addAll").click(function () {
    // TODO：補充代碼，實現(xiàn)功能
    changeAccess(true,userList)
  });
  $("#remove").click(function () {
    // TODO：補充代碼，實現(xiàn)功能
    let changeList = Array.from(rightSelectEle.selectedOptions).map(e=>({name:e.value}))
    changeAccess(false,changeList)
  });
  $("#removeAll").click(function () {
    // TODO：補充代碼，實現(xiàn)功能
    changeAccess(false,userList)
  });
});

const tableEle = document.querySelector("#userList")
const leftSelectEle = document.querySelector("#leftSelect")
const rightSelectEle = document.querySelector("#rightSelect")

function updateTable() {
  let html = `<tr>
    <td>用戶名</td>
    <td>權限</td>
  </tr>`
  userList.forEach(user=>{
    let name = user.name
    let right = user.right ? "管理員" : "普通用戶"
    html += `<tr>
    <td>${name}</td>
    <td>${right}</td>
  </tr>`
  })
  tableEle.innerHTML = html
}

function updateSelect() {
  let leftHtml = ``
  let rightHtml = ``
  userList.forEach(user=>{
    let tmpHtml = `<option value="${user.name}">${user.name}</option>` 
    if (user.right) {
      rightHtml += tmpHtml
    } else {
      leftHtml += tmpHtml
    }
  })
  leftSelectEle.innerHTML = leftHtml
  rightSelectEle.innerHTML = rightHtml
}
/**
 * 修改權限
 * @param {Object} right 要修改的權限
 * @param {Object} changeList 要修改權限的用戶列表
 */
function changeAccess(right, changeList) {
  // TODO：補充代碼，實現(xiàn)功能
  changeList.forEach(changeUser=>{
    let idx = userList.findIndex(user=>user.name===changeUser.name)
    userList[idx].right = right
  })
  updateTable()
  updateSelect()
}
var userList = []
// 異步獲取數(shù)據(jù)
async function getData() {
  // TODO：補充代碼，實現(xiàn)功能
  await $.ajax({
    url: "./js/userList.json",
    type: "GET",
    success: function(res){
      userList = res
    }
  })
  updateTable()
}

【真題練習】一起會議吧

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>一起會議吧</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <link rel="stylesheet" href="./css/iconfont/iconfont.css" />
  </head>
  <body>
    <div id="app">
      <!-- TODO：請在下面實現(xiàn)需求 -->
      <!-- 登錄/注銷窗口 -->
      <div class="login">
        <div class="left-tools">
          <a class="close-btn"></a>
          <a class="shrink-btn"></a>
        </div>
        <h3 v-if="!isLogin">登錄</h3>
        <h3 v-else>注銷</h3>
        <p v-if="!isLogin">
          選擇用戶：<select id="selectUser" v-model="selectId">
            <option :value="user.id" v-for="user in userList" :key=""user.id>{{user.name}}</option>
          </select>
        </p>
        <p v-else>當前用戶為：Tom</p>

        <a class="login-btn" @click="login" v-if="!isLogin">登錄</a>
        <a class="login-btn" @click="logout" v-else>注銷</a>
      </div>

      <!-- 右側顯示用戶列表窗口按鈕 -->
      <button id="show" class="right-btn" @click="()=>isDisplay=true" v-if="!isDisplay">
        <span class="iconfont icon-left-arrow"></span>
      </button>

      <!-- 用戶列表窗口 -->
      <div class="user-dialog" v-if="isLogin && isDisplay">
        <!-- 用戶列表窗口上側工具欄 -->
        <ul class="tools">
          <li class="tools-left">
            <button :class="{active:activeIndex === 0}" @click="toolChange('none',0)">
              <span class="iconfont icon-close"></span>
            </button>
            <button :class="{active:activeIndex === 1}" @click="toolChange('one',1)">
              <span class="iconfont icon-dialog"></span>
            </button>
            <button :class="{active:activeIndex === 2}" @click="toolChange('all',2)">
              <span class="iconfont icon-list"></span>
            </button>
          </li>
          <li class="tools-right" @click="()=>isDisplay=false">
            <button class="show-list">
              <span class="iconfont icon-retract"></span>
            </button>
          </li>
        </ul>

        <!-- 用戶列表 -->
        <ul class="say-list">
          <li>
            <span class="iconfont icon-microphone"></span>
          </li>
          <li class="line"></li>
          <li>正在講話：Tom；</li>
        </ul>
        <ul class="user-list">
          <li v-for="user in meetUserList" :key=""user.id>
            <img class="header" :src="user.imgPath" />
            <div class="user-name">
              <span class="iconfont icon-user header-icon" v-if="user.isHost"></span>
              <span class="iconfont icon-microphone"></span>
              {{user.name}}
            </div>
          </li>
          <!-- <li>
            <img class="header" src="./images/header2.png" />
            <div class="user-name">
              <span class="iconfont icon-microphone"></span>
              Lily
            </div>
          </li> -->
        </ul>
      </div>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript" src="./js/axios.min.js"></script>
    <script type="text/javascript">
      // TODO：請在下面實現(xiàn)需求
      new Vue({
        el: "#app",
        data(){
          return {
            userList: [],
            isLogin: false,
            selectId: "1",
            isDisplay: true,
            mode: "all",
            activeIndex: 2,
          }
        },
        methods: {
            login(){
              this.isLogin = true
            },
            logout(){
              this.isLogin = false
            },
            toolChange(mode,idx){
              this.activeIndex = idx 
              this.mode = mode
            }
        },
        computed:{
          meetUserList:function(){
            if(this.mode === 'all'){
              return this.userList.filter(user=>user.id === this.selectId).concat(this.userList.filter(user=>user.id !== this.selectId)) 
            }else if(this.mode === 'one'){
              console.log(this.selectId,this.userList,this.userList.filter(user=>user.id === this.selectId))
              return this.userList.filter(user=>user.id === this.selectId)
            }else if(this.mode === 'none'){
              return []
            }
          }
        },
        mounted(){
          axios.get("./js/userList.json").then(res => this.userList = res.data)
        }
      });
    </script>
  </body>
</html>

【真題練習】商城管理系統(tǒng)

考點：遞歸操作和深度優(yōu)先遍歷
思路：利用遞歸生成 menus，利用深度優(yōu)先遍歷生成auths 文章來源地址http://www.zghlxwxcb.cn/news/detail-741679.html

// menuList 僅為示例數(shù)據(jù)，非實際使用數(shù)據(jù)，實際使用數(shù)據(jù)層級不確定（可能是四級五級六級等），數(shù)據(jù)結構與 menuList 一致
// 1. `parentId` 如果為 `-1`，則表示此條數(shù)據(jù)為頂級數(shù)據(jù)。
// 2. `parentId` 為該條數(shù)據(jù)的父級數(shù)據(jù)的 `id`。

let menuList = [
  { parentId: -1, name: "添加管理員", id: 10, auth: "admin" },
  { parentId: 10, name: "管理員權限分配", id: 11, auth: "admin-auth" },
  { parentId: -1, name: "商品管理", id: 1, auth: "product" },
  { parentId: 1, name: "商品列表", id: 4, auth: "productList" },
  { parentId: 4, name: "商品分類", id: 5, auth: "category" },
  { parentId: 5, name: "添加分類", id: 8, auth: "addClassification" },
  { parentId: 4, name: "商品上架", id: 6, auth: "product" },
  { parentId: -1, name: "評論管理", id: 2, auth: "comments" },
  { parentId: -1, name: "個人中心", id: 3, auth: "profile" },
];

/**
 * @param {*} menuList 傳入的數(shù)據(jù)
 * @return {*} menus 轉化后的樹形結構數(shù)據(jù)，auths 轉化后的權限列表數(shù)組
 */
// 遞歸插入
const insertMenu = (menus,menu) => {
  if( !menus || menus.length < 1) return ;
  for (let index = 0; index < menus.length; index++) {
    const element = menus[index];
    if (element.id === menu.parentId) {
      element.children.push(menu)
      return 
    }
    insertMenu(element.children,menu)
  }
}
// 深度優(yōu)先
const deepSearch = (menus) => {
  let auths = []
  menus.forEach(menu=>{
    auths.push(menu.auth)
    if (menu.children.length > 0) {
      auths = auths.concat(deepSearch(menu.children))
    }
  })
  return auths
}

const getMenuListAndAuth = (menuList) => {
  // TODO：待補充代碼
  let menus = []
  let auths = []
  menuList.forEach(menu=>{
    let temp = {
      parentId: menu.parentId,
      name: menu.name,
      id: menu.id,
      auth: menu.auth,
      children: []
    }
    if(menu.parentId === -1){
      // 第一級
      menus.push(temp)
    }else{
      // 第n級插入
      insertMenu(menus,temp)
    }
  })
  auths = deepSearch(menus)
  return { menus, auths }; // menus 轉化后的樹形結構數(shù)據(jù)，auths 轉化后的權限列表數(shù)組
};

// 請勿刪除和修改以下代碼
try {
  module.exports = { getMenuListAndAuth };
} catch (e) {}

到了這里，關于第十三屆藍橋杯國賽 Web 前端組（大學組） 真題練習及答案解析的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！