0
0

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

【真题练习】分一分

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

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

【真题练习】新鲜的蔬菜

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

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

【真题练习】水果消消乐

考点： 

  1. DOM

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

  1. // 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
  2. // 隐藏开始按钮，方格上的图片显示后又隐藏
  3. 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)}// 正式开始游戏
  4. let score =0// 记录分数
  5. let num =0// 记录是第一次翻牌还是第二次翻牌
  6. let preId =""
  7. let preText =""
  8. function game(){}
  9. function startGame(){start()// 给每个box绑定点击事件,不能给img元素绑定点击事件，因为img元素是display:noneArray.from(boxList).forEach(box=>{
  10.         box.addEventListener("click",function(e){
  11.             num++if(num ===1){// 如果第一次点击
  12.                 preText = e.target.firstElementChild.alt 
  13.                 preId = e.target.id
  14.                 changeDisplay(e.target.firstElementChild,"block")}else{// 第二次点击
  15.                 let nowText = e.target.firstElementChild.alt 
  16.                 let nowId = e.target.id
  17.                 changeDisplay(e.target.firstElementChild,"block")
  18.                 console.log(nowText,preText,nowId,preId)if(nowText === preText){//水果相同 进行消除，加分操作
  19.                     score +=2// 这里得用不可见，要不然位置顺序会变// 不可见仍然触发点击事件setTimeout(function(){
  20.                         document.getElementById(preId).style.visibility ="hidden"
  21.                         document.getElementById(nowId).style.visibility ="hidden"
  22.                         scoreEle.innerText = score
  23.                         // 清空
  24.                         num =0
  25.                         preId =""
  26.                         preText =""},1000)}else{//水果不相同 进行隐藏，减分操作
  27.                      score -=2// 隐藏图像setTimeout(function(){
  28.                         document.getElementById(preId).firstElementChild.style.display ="none"
  29.                         document.getElementById(nowId).firstElementChild.style.display ="none"
  30.                         scoreEle.innerText = score
  31.                         // 清空
  32.                         num =0
  33.                         preId =""
  34.                         preText =""},1000)}}})})}

【真题练习】用什么来做计算 A

考点：js操作和eval()方法
思路：监听每个按钮的点击事件，维护一个字符串

  1. str

，如果是 

  1. reset

， 

  1. sqrt

， 

  1. equal

这三个按钮的点击事件，进行相应的处理，其他按钮的点击事件，则直接拼接

  1. str

字符串，并更新视图即可。

  1. // TODO：请补充代码const formulaEle = document.querySelector("#formula")const resultEle = document.querySelector("#result")const btnList = document.querySelectorAll(".calc-button")let str =""
  3. Array.from(btnList).forEach(btn=>{
  4.     btn.addEventListener("click",function(){const id = btn.id 
  5.         const s = btn.innerText.replace("x","*").replace("÷","/")
  6.         console.log("click ...",id)switch(id){case"reset":
  7.                 str =""
  8.                 formulaEle.value =""
  9.                 resultEle.value =""returncase"sqrt":
  10.                 resultEle.value = Math.sqrt(eval(str));returncase"equal":
  11.                 resultEle.value =eval(str);returndefault:
  12.                 str += s
  13.                 formulaEle.value = str
  14.                 break;}})})

【真题练习】权限管理

考点：DOM操作
思路：首先获取数据，然后根据数据驱动去更新DOM，每次点击事件都去会改变

  1. userList

的值，然后根据

  1. userList

的状态去更新页面的变化。

  1. $(function(){// 使用 ajax 获取 userList.json 数据并渲染到页面getData();// 为按钮添加事件$("#add").click(function(){// TODO：补充代码，实现功能let changeList = Array.from(leftSelectEle.selectedOptions).map(e=>({name:e.value}))changeAccess(true,changeList)});$("#addAll").click(function(){// TODO：补充代码，实现功能changeAccess(true,userList)});$("#remove").click(function(){// TODO：补充代码，实现功能let changeList = Array.from(rightSelectEle.selectedOptions).map(e=>({name:e.value}))changeAccess(false,changeList)});$("#removeAll").click(function(){// TODO：补充代码，实现功能changeAccess(false,userList)});});const tableEle = document.querySelector("#userList")const leftSelectEle = document.querySelector("#leftSelect")const rightSelectEle = document.querySelector("#rightSelect")functionupdateTable(){let html =`<tr>
  2.     <td>用户名</td>
  3.     <td>权限</td>
  4.   </tr>`
  5.   userList.forEach(user=>{let name = user.name
  6.     let right = user.right ?"管理员":"普通用户"
  7.     html +=`<tr>
  8.     <td>${name}</td>
  9.     <td>${right}</td>
  10.   </tr>`})
  11.   tableEle.innerHTML = html
  12. }functionupdateSelect(){let leftHtml =``let rightHtml =``
  13.   userList.forEach(user=>{let tmpHtml =`<option value="${user.name}">${user.name}</option>`if(user.right){
  14.       rightHtml += tmpHtml
  15.     }else{
  16.       leftHtml += tmpHtml
  17.     }})
  18.   leftSelectEle.innerHTML = leftHtml
  19.   rightSelectEle.innerHTML = rightHtml
  20. }/**
  21.  * 修改权限
  22.  * @param {Object} right 要修改的权限
  23.  * @param {Object} changeList 要修改权限的用户列表
  24.  */functionchangeAccess(right, changeList){// TODO：补充代码，实现功能
  25.   changeList.forEach(changeUser=>{let idx = userList.findIndex(user=>user.name===changeUser.name)
  26.     userList[idx].right = right
  27.   })updateTable()updateSelect()}var userList =[]// 异步获取数据asyncfunctiongetData(){// TODO：补充代码，实现功能await $.ajax({url:"./js/userList.json",type:"GET",success:function(res){
  28.       userList = res
  29.     }})updateTable()}

【真题练习】一起会议吧

  1. <!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：请在下面实现需求 --><!-- 登录/注销窗口 --><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">
  2.           选择用户：<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>
  3.               Lily
  4.             </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：请在下面实现需求newVue({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 
  5.               this.mode = mode
  6.             }},computed:{meetUserList:function(){if(this.mode ==='all'){returnthis.userList.filter(user=>user.id ===this.selectId).concat(this.userList.filter(user=>user.id !==this.selectId))}elseif(this.mode ==='one'){
  7.               console.log(this.selectId,this.userList,this.userList.filter(user=>user.id ===this.selectId))returnthis.userList.filter(user=>user.id ===this.selectId)}elseif(this.mode ==='none'){return[]}}},mounted(){
  8.           axios.get("./js/userList.json").then(res=>this.userList = res.data)}});</script></body></html>

【真题练习】商城管理系统

考点：递归操作和深度优先遍历
思路：利用递归生成 

  1. menus

，利用深度优先遍历生成

  1. auths 
  1. // menuList 仅为示例数据，非实际使用数据，实际使用数据层级不确定（可能是四级五级六级等），数据结构与 menuList 一致// 1. `parentId` 如果为 `-1`，则表示此条数据为顶级数据。// 2. `parentId` 为该条数据的父级数据的 `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"},];/**
  2.  * @param {*} menuList 传入的数据
  3.  * @return {*} menus 转化后的树形结构数据，auths 转化后的权限列表数组
  4.  */// 递归插入constinsertMenu=(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){
  5.       element.children.push(menu)return}insertMenu(element.children,menu)}}// 深度优先constdeepSearch=(menus)=>{let auths =[]
  6.   menus.forEach(menu=>{
  7.     auths.push(menu.auth)if(menu.children.length >0){
  8.       auths = auths.concat(deepSearch(menu.children))}})return auths
  9. }constgetMenuListAndAuth=(menuList)=>{// TODO：待补充代码let menus =[]let auths =[]
  10.   menuList.forEach(menu=>{let temp ={parentId: menu.parentId,name: menu.name,id: menu.id,auth: menu.auth,children:[]}if(menu.parentId ===-1){// 第一级
  11.       menus.push(temp)}else{// 第n级插入insertMenu(menus,temp)}})
  12.   auths =deepSearch(menus)return{ menus, auths };// menus 转化后的树形结构数据，auths 转化后的权限列表数组};// 请勿删除和修改以下代码try{
  13.   module.exports ={ getMenuListAndAuth };}catch(e){}
标签： javascript 蓝桥杯 前端
本文转载自: https://blog.csdn.net/Brooker_/article/details/130998131
版权归原作者 MC_kanon 所有， 如有侵权，请联系我们删除。
登录后发布评论

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

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？