2022年，蓝桥杯web前端线上模拟赛（第二期）

1.卡片化标签

// 实现选项卡功能
function init() {
  // TODO 待补充代码
  var tabs = document.querySelector('.tabs');
  var divs = tabs.querySelectorAll('div');
  var items = document.querySelectorAll('#content div');
  // var items = content.querySelectorAll('div');
  // console.log(divs);
  // console.log(items);
  for (var i = 0; i < divs.length; i++) {

    divs[i].setAttribute('index', i);

    divs[i].onclick = function () {
      for (var i = 0; i < divs.length; i++) {
        divs[i].className = ''

      }
      this.className = 'active';
      var index = this.getAttribute('index');
      for (var i = 0; i < items.length; i++) {
        items[i].className = '';
      }
      items[index].className = 'active'
    }

  }
}
init();

2.随机数生成

/**
 * 封装函数，函数名 getRandomNum(min,max,countNum)
 * 生成 min~max 范围的 countNum 个不重复的随机数，存入数组并返回
 */
//生成指定数目和范围的随机数
const getRandomNum = function (min, max, countNum) {
  var arr = [];
  // 在此处补全代码
  for (var i = 0; i < countNum; i++) {

    arr[i] = Math.floor(Math.random() * (max - min - 1)) + min;//得到随机数

    
    if (i > 0) {
      for (var m = i - 1; m >= 0; m--) {
        if (arr[i] == arr[m]) {
          i--;
          break;
        }
      }
    }
  }
  return arr;
};

module.exports = getRandomNum; //请勿删除

3.个人博客

/* 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 {
  margin: 1.5rem auto 0 auto;
  max-width: 1100px;
  padding: 0 0.9rem;
  box-sizing: border-box;
  position: relative;
  display: flex;
}

/*/* TODO 宽度自适应 居左显示 */
.main-wrapper .main-left {
  float: left;
  width: 0 auto;
}

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

4.学生成绩统计

5.水果摆盘

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

6.给网页化妆

* {
  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;
}
/*TODO：请补充代码*/

/* 表单大的外观 */
.content-container {      
 
  width: 450px;
  height: 600px;
  background-color: rgba(0,0,0,.45);
  border-radius: 10px;
  margin: 0 auto;

}

/* 表单里面的布局 */
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


/* 图片样式*/
.content img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-top: -50px;
}


.content h2 {
  margin: 0 0 50px;
  font-size: 45px;
  font-weight: 800;
  text-align: center;
}


.form input {
  border: 0;
  outline: none;
  font-size: 20px;
  border-radius: 5px;
  width: 300px;
  text-align: center;
  height: 40px;
}
.form form {
  /* margin-top: 30px; */
  display: flex;
  flex-direction: column;
  align-items: center;

}
.form button {
  margin-right: 10px;
  width: 80px;
  height: 30px;
  border-color:#041c32 ;
  background-color: #2d4263;
  font-size: 16px;
  color: white;
}
.text a {
  margin-top: 5px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}
form > * {
  margin: 10px;
}

7.小兔子爬楼梯

const climbStairs = (n) => {
  // TODO：请补充代码
  return (n <= 2) ? n : climbStairs(n - 1) + climbStairs(n - 2);
}


module.exports = climbStairs;

8.时间管理大师

  
  

  



  

    

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

        内容
        
        确认
      
    

    

      
暂无数据
      

        
        {{index+1}}
        
        {{todoing}}
        
        
      


      

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

9.购物车

	
	
	
	
	
	
	
	

 

	

		
购物车
		
		

			
				
				
				


					
						
						{{item.name}}
					
					

						+
						
							
							{{item.num}}
						
						-
					
				
			
		
	
	

10.菜单检索

js部分

const app = new Vue({
  el: "#app",
  // 在此处补全代码，实现二级菜单搜索功能
  data: {
    input: '',
    dataList: []
  },
  // async created() {
  //   this.dataList = await this.queryData();
  // },
  created() {
    this.queryData()
  },
  methods: {
    async queryData() {
      // let { data } = await axios({
      //   url:'./data.json'
      // })
      axios.get('./data.json').then(res => {
        this.dataList = res.data
        // console.log(this.dataList);
      })
      // console.log(data);
      // return data;
    },

    //过滤数据进行模糊搜索
    filterData(data) {
      // console.log(data);
      let filter = data.filter(i =>
        i.meta.title.includes(this.input)
        // console.log(i.meta.title);
        // console.log(this.input);
      );
      // console.log(filter);
      // return data.filter(i => i.meta.title.includes(this.input));
      return filter
    },

    //搜索高亮
    searchHeight(item) {
      let Hight = this.input === '' ? false : item.includes(this.input) ? true : false;
      return Hight;
      // return this.input === '' ? false : item.includes(this.input) ? true : false;
    }
  },

  computed: {
    list() {
      let _this = this;
      let data = _this.dataList;
      let arr = [];
      arr = this.filterData(data)
      // console.log(arr);
      
      for (let i = 0; i < data.length; i++) {
        // console.log(data.length);
        // console.log(data[i].children);

        data[i].children?.forEach(value =>
        {
          if (value.meta.title.includes(_this.input)) {
            arr = new Set([...arr, data[i]])
          }
          // console.log(value.meta.title);
        });

      }
      console.log(arr);
      return arr;
    }

  }
}); 

html部分

  
  
  
  
  
  
  



  
  

    
    

      


        
          {{item.meta.title}}
        
        

          


            
              {{k.meta.title}}