第十三届蓝桥杯（Web 应用开发）模拟赛 大学组参考答案

01卡片化标签页

// 实现选项卡功能
function init() {
  // TODO 待补充代码
  let tabs = document.getElementsByClassName('tabs')
  // console.log(tabs)
  let div = tabs[0].getElementsByTagName('div')
  // console.log(div)

  let content = document.getElementById('content')
  let inners = content.getElementsByTagName('div')
  // console.log(inners)
  for (let i = 0; i < div.length; i++) {
    div[i].onclick = () => {

      for (let j = 0; j < div.length; j++) {
        if (i == j) {
          div[i].classList.add('active')
          inners[i].classList.add('active')
        }
        else {
          div[j].classList.remove('active')
          inners[j].classList.remove('active')
        }
      }
    }
  }


}
init();

02随机数生成器

/**
 * 封装函数，函数名 getRandomNum(min,max,countNum)
 * 生成 min~max 范围的 countNum 个不重复的随机数，存入数组并返回
 */
//生成指定数目和范围的随机数
const getRandomNum = function (min, max, countNum) {
  var arr = [];
  // 在此处补全代码
  let set = new Set()
  while (set.size < countNum) {
    let num = parseInt(Math.random() * (max - min) + min)
    set.add(num)
  }
  arr = [...set]

  return arr;
};
module.exports = getRandomNum; //请勿删除

03个人博客

/* TODO:banner 上的文字 需要居中显示 */
 
.home-wrapper .banner .banner-conent .hero {
  margin-top: 3rem;
  text-align: center;
}


/* TODO: main-wrapper 通过设置main-wrapper 布局方式 让.main-left  .main-right 正确显示 */

.main-wrapper {
  display: flex;
  margin: 1.5rem auto 0 auto;
  max-width: 1100px;
  padding: 0 0.9rem;
  box-sizing: border-box;
  position: relative;
}


/*/* TODO 宽度自适应 居左显示 */

.main-wrapper .main-left {
  width: auto;
}


/* 宽 245px 居右显示 */
.main-wrapper .main-right > * {
  width: 245px;
  box-sizing: border-box;
}

04学生成绩统计

      var option = {
        title: {
          text: "学生成绩统计",
        },
        tooltip: {},
        legend: {
          data: ["成绩"],
        },
        // TODO:待补充修改代码，定义x轴数据,并让数据正确显示
        // y轴  
         xAxis: {
          data: ["张三", "李四", "王五", "贺八", "杨七", "陈九"],
        },
        yAxis: {
          type:'value',///
          data: ['20', '40','60','80','100'],
        },
     
        series: [
          {
            name: "成绩",
            type: "bar",
            yAxisIndex: 0,
            data: [55, 90, 65, 70, 80, 63],
          },
        ],
      };

05水果摆盘

/* 菠萝 TODO 待补充代码 */
 
.yellow {
    display: flex;
    align-self: flex-end;
    order: 1;
}
 

06给页面化个妆

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
body {
    background-color: azure;
    background-size: cover;
    color: #fff;
    height: 945;
    width: 1920;
}
 
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
 
.nav-bar p {
    font-size: large;
    color: cornflowerblue;
    margin: 15px;
}
 
.form {
    height: 600px;
    width: 450px;
    background: rgba(0, 0, 0, .45);
    border-radius: 10px;
    text-align: center;
    padding-top: 75px;
}
 
form {
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
input {
    margin-top: 20px;
    width: 300px;
    border-radius: 5px;
    color: black;
    font-size: 20px;
    height: 30px;
    border: none;
    text-align: center;
    align-items: center;
}
 
.btns {
    width: 170px;
    display: flex;
    justify-content: space-between;
}
 
button {
    margin-top: 20px;
    width: 80px;
    height: 30px;
    color: #fff;
    align-items: center;
    font-size: 16px;
    text-align: center;
    border: #041c32 solid 2px;
    background: #2d4263;
}
 
.content-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.content {
    position: absolute;
    top: -50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    display: float;
    top: 75px;
}
 
h2 {
    display: inline;
    font-size: 45px;
    font-weight: 800;
}
 
.text {
    position: relative;
    top: -300px;
}
 
a {
    text-decoration: none;
    color: white;
}
 
 
/*TODO：请补充代码*/

07小兔子爬楼梯

const climbStairs = (n) => {
  if (n == 1 || n == 2) return n;
  else {
    return climbStairs(n - 1) + climbStairs(n - 2)
  }
  // TODO：请补充代码
};
module.exports = climbStairs;

08时间管理大师

  
  

  



  

    

      
Todos
      
罗列日常计划，做一个时间管理大师！
      

        内容
        
        确认
      
    

    

      
暂无数据
      

        {{index+1}}
        {{i}}
        
      

      

         总数：{{list.length}} 
        清除
      
    
  
  
  

09购物车

 

    
    
    
    
    
    
    

 

    

        
购物车
        
        

            

                
                
                

                    
						{{item.name}}
					
                    

                        +
                        
						{{item.num}}
						
                        -
                    
                
            
        
    
    

10菜单树检索

html

axios请求本地数据，计算属性中先对显示的元素进行标记，fiter过滤，动态样式匹配

	
		
		
		
		
		
		
		
	
	
    
		


			
			

				

					{{c1.meta.title}}
					

						

							{{c2.meta.title}}
						
					
				
			

		
	
  
  

js

const app = new Vue({
  el:"#app",
  // 在此处补全代码，实现二级菜单搜索功能
  data(){
    return {
      val: '',
      dataList: []
    }
  },
  async beforeCreate(){
    const res = await axios.get('data.json')
    this.dataList = res.data
  },
  computed: {
    showList(){
      if(!this.val.length) return this.dataList;
      const arr = JSON.parse(JSON.stringify(this.dataList))
      arr.forEach(item => {
        if(item.meta.title.includes(this.val)) [item.meta.par, item.meta.hl] = [true, true]
        item.children?.forEach(({meta}) => {
          if(meta.title.indexOf(this.val) !== -1)
            [meta.hl, item.meta.par] = [true, true]
        })
      })
      return arr.filter(item => item.meta.par)
    }
  }
});