第十三届蓝桥杯web前端模拟赛2期-职业组

原创已于 2025-03-30 17:37:06 修改 · 2.8k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #jquery #vue.js #ajax

于 2022-03-25 00:26:55 首次发布

蓝桥杯Web真题/模拟题专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一系列前端开发实用技巧，包括卡片化标签实现、随机数生成、响应式布局、学生成绩图表展示等，覆盖了HTML、CSS、JavaScript等多个方面。

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.学生成绩统计

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    
    var option = {
  
    tooltip: {
    },
    legend: {
        data: ["成绩"],
      },
    xAxis: [
      {
        type: "category",
        data: ["张三", "李四", "王五", "贺八", "杨七", "陈九"],
      }
    ],
    yAxis: [{
     
      }],
    series: [
        {
          name: "成绩",
          type: "bar",
          data: [55, 90, 65, 70, 80, 63],
        },
      ],
  };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>

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.时间管理大师

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>任务管理器</title>

  <link type="text/css" href="css/style.css" rel="stylesheet" />
</head>

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

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


      <li v-if="todoings.length !=0">
    
        <b v-show="todoings.length !=0"> 总数：{{todoings.length}}</b>
        <b id="clear" @click="removeAll" v-show="todoings.length !=0">清除</b>
      </li>
    </ul>
  </div>
  <script src="js/vue.js"></script>
  <script>
    var top = new Vue({
      el: "#box",
      // 在此处补全代码，实现所需功能
      data: {
        addTodo: '',
        todoings: []
      },
      methods: {
        addTodoEvent() {
          if (this.addTodo == '') return alert("输入不能为空")
          this.todoings.push(this.addTodo)
          this.addTodo = ''
        },
        removeTodo(index){
          this.todoings.splice(index,1)
        },
        removeAll(){
          this.todoings = []
        }
        
      },
    });
  </script>
</body>

</html>

9.购物车

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>购物车</title>
	<script src="./js/vue.js"></script>
	<script src="./js/axios.js"></script>
	<link rel="stylesheet" href="./css/element-ui.css">
	<link rel="stylesheet" href="./css/index.css">
</head>
 
<body>
	<div class="container" id="app">
		<h4>购物车</h4>
		<!-- 购物车列表 -->
		<div v-for="item in carlist">
			<el-card class="box-card">
				<!-- 商品图片 -->
				<img :src="item.img">
				<div>

					<span>
						<!-- 商品名称 -->
						{{item.name}}
					</span>
					<div class="bottom clearfix">
						<el-button type="text" class="button">+</el-button>
						<el-button type="text" class="button">
							<!-- 商品数量 -->
							{{item.num}}
						</el-button>
						<el-button type="text" class="button">-</el-button>
					</div>
				</div>
			</el-card>
		</div>
	</div>
	</div>

	<!-- 引入组件库 -->
	<script src="./js/element-ui.js"></script>
	<script>
		new Vue({
			el: "#app",
			data: {
				carlist: [] //购物车列表
			},
			created() {
				// 在这里使用axios 发送请求
				this.getlist()
				
			},
			methods: {
				async getlist(){
					axios.get('./carList.json').then(res=>{
						
						this.carlist = res.data
					
					})
				}
			},
		})


	</script>
</body>




</html>

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部分

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>test</title>
  <script src="./js/vue.js"></script>
  <script src="./js/axios.min.js"></script>
  <style>
    input {
      width: 200px;
      height: 32px;
      padding-left: 5px;
    }

    .active {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <!-- 需求：输入待查找的字段，输出包含该字段的所有菜单数据。
    1、若该菜单有父级菜单，则返回其父级菜单及同胞菜单。
    2、若该菜单有子级菜单，则返回该菜单及其下子级菜单。
    3、若该菜单既无父级也无子级，则返回菜单本身即可。
    测试字段：查询、首页、管理、配置、维护 -->
  <div id="app">
    <input type="text" placeholder="请输入要搜索的菜单内容" v-model="input" />
    <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>
<script type="text/javascript" src="./js/index.js"></script>

</html>

6 条评论

优快云-Ada助手 2025.03.31
哇, 你的文章质量真不错，值得学习！不过这么高质量的文章, 还值得进一步提升, 以下的改进点你可以参考下: (1)增加除了各种控件外，文章正文的字数；(2)提升标题与正文的相关性；(3)使用更多的站内链接。

weixin_46201450 2022.04.08
这个模拟赛的文件在哪里下载啊
- Emo猪回复weixin_46201450 2022.04.08
  第二期模拟赛题？

Emo猪 2022.04.06
之前直播的老师有说不考这些东西，大概率不考

booo_ooom 2022.04.06
你好，问一下2022的web蓝桥杯大学组考不考node和vue-router
- Emo猪回复booo_ooom 2022.04.06
  https://www.bilibili.com/video/BV1q34y187m3?spm_id_from=333.999.0.0你可以看看这个视频，5到15分钟，里面有说