蓝桥杯模拟赛第二场（web）

前端开发实战：从选项卡到数据可视化

原创已于 2022-07-16 10:32:53 修改 · 2.8k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-03-15 21:25:18 首次发布

蓝桥杯专栏收录该内容

1 篇文章

订阅专栏

本文涵盖了前端开发的多个实战题目，包括卡片化标签页的实现、随机数生成器的封装、个人博客样式美化、学生成绩统计的Echarts图表、水果摆盘的Flex布局、登录页面的CSS设计、小兔子爬楼梯的递归算法、时间管理大师的Vue任务管理器、购物车功能的Vue实现以及菜单树检索的二级菜单搜索功能。这些内容涉及到JavaScript、Vue.js、CSS3、Echarts等技术，展示了前端开发中的常见应用场景。

文章目录

蓝桥杯模拟赛第二场（web）

蓝桥杯模拟赛第二场（web）

1 卡片化标签页

题目：卡片化标签页
题目介绍：
选项卡功能在前端开发中特别常见，作为设置选项的模块，每个选项卡代表一个活动的区域，点击不同的区域，即可展现不同的内容，这样既能节约页面的空间又能提升页面性能。
本题需要在已提供的基础项目中使用JS完成选项卡功能的编码，最终实现切换选项卡可以显示对应内容的效果。
目标：实现选项卡功能，如下图所示。
在这里插入图片描述

在这里插入图片描述
代码实现。如下所示
需要注意的是，for中的let不可省，因为let是块级作用域，如果省略就会变成全局作用域，出现bug。块级作用域与全局作用域的区别可以参考这篇文章。参考文章

  var tabs = document.querySelector('.tabs').querySelectorAll('div')
  var contents = document.querySelector('#content').querySelectorAll('div')

  
  for(let i=0;i<tabs.length;i++){
    tabs[i].onclick = function(){
      for(let a=0;a<tabs.length;a++){
        tabs[a].classList.remove('active')
        contents[a].classList.remove('active')
      }
    tabs[i].classList.add('active')
    contents[i].classList.add('active')

    }
  }

2 随机数生成器

题目：随机数生成器
题目介绍：
实际工作中随机数的使用特别多，比如随机抽奖、随机翻牌。通过随机数还能实现很多有趣的效果，比如随机改变元素的位置或颜色。
本题需要在已提供的基础项目中使用JS知识封装一个函数，该函数可以根据需要，生成指定范围和个数的不重复的随机数数组。
题目目标：生成随机数。但是要注意，题目要求随机数不可重复。
在这里插入图片描述
具体代码如下所示

const getRandomNum = function (min, max, countNum) {
  var arr = [];
  var num = 0
  for (i = 0; i < countNum; i++) {
    num = parseInt(Math.random() * (max-min)) + min
    // console.log(num);
    if (arr.length == 0) {
      arr.push(num)
    }
    else {
      for (j = 0; j < arr.length; j++) {
        if (num == arr[j]) {
          i--
          // console.log('有重复');
          break
        }
        else if (j == arr.length - 1) {
          arr.push(num)
          break
        }
      }
      // console.log(arr);
    }
  }
  return arr;
};

3 个人博客

题目：个人博客
题目介绍：
很多人都有自己的博客，在博客上面用自己的方式去书写文章，用来记录生活，分享技术等。下面是蓝桥云课的博客，但是上面还缺少一些样式，需要大家去完善。
本题比较简单，考察flex布局。
具体代码如下

/* 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; */
  order: 0;


}

/* 宽 245px 居右显示 */
.main-wrapper .main-right > * {
  width: 245px;
  /* float: right; */
  order: 1;
}

4 学生成绩统计

题目：学生成绩统计
题目介绍:
随着大数据的发展，数据统计在很多应用中显得不可或缺,echarts 作为一款基于JavaScript 的数据可视化图表库，也成为了前端开发的必备技能，下面我们一起来用echarts开发一个学生数据统计的柱形图。
目标：修复报错，使图表展示出来。
具体代码如下所示：

// TODO:待补充修改代码，定义x轴数据,并让数据正确显示
      xAxis: {
        data: ["张三", "李四", "王五", "贺八", "杨七", "陈九"],
      },
      // y轴
      yAxis: {
        type: 'value',
        
        min: 0,
        max: 100,

      },

页面效果如图所示
在这里插入图片描述

5 水果摆盘

题目：水果摆盘
题目介绍:
目前CSS3中新增的Flex弹性布局已经成为前端页面布局的首选方式，这次试题将利用Flex实现经典布局效果。
本题考查flex布局，并且提示使用align-self与order
具体代码如下

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

6 给页面化个妆

题目：给页面化个妆
题目介绍:
各个网站都拥有登录页面，设计一个界面美观的登录页面，会给用户带来视觉上的享受。本题中我们要完成一个登录页面的布局。
目标：对页面的css样式进行设置，使页面美观如样例一样。
具体代码如下所示

/*TODO：请补充代码*/
.content{
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  height: 600px;
  width: 450px;
  background-color: rgba(0,0,0,.45);
  border-radius: 10px;
  position: relative;
  text-align: center;
}
.content img{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  top: -50px;
  left: 125px;
}
.content h2{
padding-top: 150px;
margin-bottom: 50px;
  font-size: 45px;
  font-weight: 800;
}
.content button{
  width: 80px;
  height: 30px;
  border-color:#041c32 ;
  background-color:  #2d4263;
  font-size: 16px;
  color: white;
  margin-top: 20px;
  margin-right: 6px;
  
}
.content input{
  margin-top: 10px;
  font-size: 20px;
  border-radius: 5px;
  width: 300px;
  height: 40px;
  font-size: 20px;
  color: black;
  text-align: center;
  border-radius: 5px;
  border-color: rgba(0,0,0,.45);
}
.text{
  margin-top: 20px;
  text-align: center;

}
.content a{
  color: white !important;
  font-size: 16px;
  text-decoration: none;
  margin-right: 5px;
  margin-left: 5px;

}

页面效果如下所示
在这里插入图片描述

7 小兔子爬楼梯

题目：小兔子爬楼梯
题目介绍:
小兔子想去月球上旅行，假设小兔子拥有一个n阶梯子，当你爬完n层就可以到达月球，小兔子每次可以跳1或者2个台阶，小兔子有多少种跳法可以到达月球呢?
解答：本题采用了递归思想
在这里插入图片描述
具体代码如下所示

const climbStairs = (n) => {
  // TODO：请补充代码
  if(n==0){
    return 0 
  }
  if(n==1){
    return 1

  }
  if(n==2){
    return 2
    
  }
  if(n>2){
    return climbStairs(n-2)+climbStairs(n-1)
    
  }
};
module.exports = climbStairs;

8 时间管理大师

题目：时间管理大师
题目介绍:时间管理永远都是提升工作和学习效率的必备法门，你在平时的工作学习中是否也有做计划和管理计划的习惯呢?
本题需要在已提供的基础项目中使用Vue.js 知识实现一个简易的任务管理器。
目标：完善一个简易功能的todolist
完整代码如下所示

<body>
  <div id="box">
    <div class="head">
      <h2>Todos</h2>
      <p>罗列日常计划，做一个时间管理大师！</p>
      <div class="input">
        <span>内容</span>
        <input type="text" placeholder="请输入你要做的事" v-model="list" />
        <span id="add" @click="addList">确认</span>
      </div>
    </div>

    <ul class="list">
      <li v-show="arr.length==0">暂无数据</li>
      <li v-show="arr.length!=0" v-for="list in arr">
        <!-- 前面的序号 -->
        <span class="xh">{{list.id}}</span>
        <!-- 列表内容 -->
        <span>{{list.name}}</span>
        <!-- 删除按钮 -->
        <span class="qc" @click="remove(list.id)"></span>
      </li>

      <li>
        <b> 总数：{{arrlength}}</b>
        <b id="clear" @click="removeAll">清除</b>
      </li>
    </ul>
  </div>
  <script src="js/vue.js"></script>
  <script>
    var top = new Vue({
      el: "#box",
      // 在此处补全代码，实现所需功能
      data: {
        list:'',
        arr: []

      },
      computed: {
        arrlength() {
          return this.arr.length
        }
      },
      methods:{
        addList(){
          this.arr.push({id:this.arr.length+1,name:this.list})
          // console.log(1);
          // console.log(this.arr);
        },
        remove(id){
          this.arr.splice(id-1,1)
          console.log(this.arr);
          for(i=0;i<this.arr.length;i++){
            this.arr[i].id=i+1
          }
        },
        removeAll(){
          this.arr=[]
        }
      }
    });
  </script>
</body>

9 购物车

题目：购物车
题目介绍:购物车是商城类应用里必不可少的功能，接下来，我们将使用vue实现一个购物车列表。
本题考查axios发请求
具体代码如下所示

<body>
	<div class="container" id="app">
		<h4>购物车</h4>
		<!--TODO 购物车列表 -->
		<div v-for="item in carlist" key="item.id">
			<div class="box-card">
				<!-- 商品图片 img -->
				<img :src="item.img">
				<div>
					<span>
						<!-- 商品名称 name -->
						{{item.name}}
					</span>
					<div class="bottom clearfix">
						<button type="text" class="button">+</button>
						<button type="text" class="button">
							<!-- 商品数量 num -->
							{{item.num}}
						</button>
						<button type="text" class="button">-</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>

	<!-- 引入组件库 -->
	<script>
		new Vue({
			el: "#app",
			data: {
				carlist: [] //购物车列表
			},
			created() {
				//TODO 使用axios  请求购物车列表
				axios.get('./carList.json').then((response)=>{
					this.carlist = response.data
				})
			},
			
		})


	</script>
</body>

10 菜单树检索

第十题参考微信名为postbilibili大佬的代码
具体代码如下

//HTML页面
<style>
      input {
        width: 200px;
        height: 32px;
        padding-left: 5px;
      }
      .active{
        background-color: yellow;
      }
    </style>
<body>
  <!-- 需求：输入待查找的字段，输出包含该字段的所有菜单数据。
    1、若该菜单有父级菜单，则返回其父级菜单及同胞菜单。
    2、若该菜单有子级菜单，则返回该菜单及其下子级菜单。
    3、若该菜单既无父级也无子级，则返回菜单本身即可。
    测试字段：查询、首页、管理、配置、维护 -->
  <div id="app">
    <input type="text" placeholder="请输入要搜索的菜单内容" v-model='txt'/>
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <span :class="[searchHeight(item.meta.title) ? 'active':'']">{{item.meta.title}}</span>
        <ul v-if="item.children">
          <li  v-for="(k,v) in  item.children" :key="v">
            <span :class="[searchHeight(k.meta.title) ? 'active':'']">{{k.meta.title}}</span>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>

const app = new Vue({
  el: "#app",
  // 在此处补全代码，实现二级菜单搜索功能
  data: {
    txt: '',
    dataList: []
  },
  created(){
    axios.get('./data.json').then((res)=>{
      this.dataList = res.data
    })
  },
  methods: {
    filterData(data) {
      return data.filter(p => p.meta.title.indexOf(this.txt)!==-1)
    },
    searchHeight(item) {
      return this.txt === '' ? false : item.indexOf(this.txt)!==-1 ? true : false
    }
  },
  computed: {
    list: function () {
      let that = this
      let data = that.dataList
      let arr = []
      arr = this.filterData(data)
      for (let i = 0; i < data.length; i++) {
        data[i]?.children?.forEach(value => {
          if (value.meta.title.indexOf(that.txt)!==-1) {
            arr = new Set([...arr, data[i]])
          }
        }, {})
      }
      console.log(arr);
      return arr
    }
  }

});