第十四届蓝桥杯web组题解

最新推荐文章于 2024-07-11 23:38:50 发布

冰镇白干

最新推荐文章于 2024-07-11 23:38:50 发布

阅读量863

点赞数 3

文章标签：蓝桥杯前端职场和发展

本文链接：https://blog.csdn.net/bt_giegie/article/details/130466402

版权

在这里插入图片描述

前言

如果你也能像我一样，蓝桥杯省一的话，那我觉得这件事情真的是，泰裤啦！！！

大一参加过蓝桥杯的CB组，也是拿到了山西省省一，省赛完了后就有点懈怠了，果不其然拿了个国优（有道题本地没问题，可能内存爆了）

之后学了 web，也是想着从事这一行，看蓝桥杯新开的这个组也不错，毫不犹豫和舍友报了。

考完后我就在群里说了句以后谁报web谁nt！！，整个比赛的体验很差，全程感觉在记事本写，开局看了一下就只有一个live Server插件，连vue文件都识别不了。。。

成绩出了竟然能省一，呜呜山西我滴神，大概40分左右就能拿山西省省一。 也就是前五道题做对后面混点分就行。

01 电影院排座位（5 分）

思路

一道布局还原题，使用flex布局和nth::child() 完成。

比赛的时候忘了nth::child()咋用了，还是用添加背景颜色一步步试出来的（菜

代码

/* TODO：待补充代码 */
.seat-area {
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
}
.seat {
  margin-left: 10px;
  margin-bottom:  10px;
}
.seat:nth-child(8n + 1) {
  margin-left: 0;
}
.seat:nth-child(8n + 3),
.seat:nth-child(8n + 7)
{
  margin-left: 30px;
}

02 图⽚⽔印⽣成（5 分）

思路

通过for循环给containe.innerHTML 添加count个span

也是非常简单

代码

// TODO: 根据输入参数创建文字水印
for (let i = 0; i < count; i++) {
   container.innerHTML += `<span style="
      color: ${color};
      transform: rotate(${deg}deg);
      opacity: ${opacity}
    ">${text}</span>`
}
// 记得返回结果
return container;

03 收集帛书碎⽚（10 分）

思路

完成一个函数，实现合并数组并去重

通过Set即可

代码

function collectPuzzle(...puzzles) {
  // TODO: 在这里写入具体的实现逻辑
  let res = new Set();
  for (let i = 0; i < puzzles.length; i++) {
    for (let j = 0; j < puzzles[i].length; j++) {
      res.add(puzzles[i][j]);
    }
  }
  return [...res];
}

04 ⾃适应⻚⾯（10 分）

思路

布局题

代码

/* TODO：待补充代码 */
@media (max-width: 800px) {
  .collapse{
    display: none;
  }

  label.menu-btn {
    color: #959595;
    cursor: pointer;
    display: block;
    padding: 16px 32px;
  }
  label.menu-btn:hover{
    color: #fff;
  }
  /* 选中菜单时显示折叠 */
  #menu-btn:checked ~ .collapse{
    display: block;
  }
  .menu li {
    display: block;
  }
  .collapse {
    position: absolute;
    background-color: #252525;
    width: 100%;
  }
  .dropdown ul {
    position: relative;
  }

  .row {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  #tutorials {
    width: 100%;
    margin: 0;
  }
}

05 外卖给好评（15 分）

思路

考察vue2的自定义事件

代码

<template>
  <div class="block">
    <span class="demonstration">请为外卖评分: </span>
    <ul class="rate-list">
      <li >
        <!-- TODO: 补全 el-rate 属性 -->
        送餐速度：<el-rate v-model="speed" show-score @change="change"></el-rate>
      </li>
      <li >
        <!-- TODO: 补全 el-rate 属性 -->
        外卖口味：<el-rate v-model="flavour" show-score 
        @change="change"></el-rate>
      </li>
      <li>
        <!-- TODO: 补全 el-rate 属性 -->
        外卖包装：<el-rate v-model="pack" show-score 
        @change="change"></el-rate>
      </li>
    </ul>
  </div>
</template>
<style>
.block {
  border: 1px solid #c7c5c5;
  padding: 10px;
}
.rate-list {
  list-style: none;
  padding-inline-start: 20px;
  margin-block-start: 10px;
  margin-block-end: 10px;
}
.el-rate {
  display: inline-block;
}
</style>

<script>
module.exports = {
  data() {
    return {
      speed: 0, // 送餐速度
      flavour: 0, // 外卖口味
      pack: 0, // 外卖包装
    };
  },
  /* TODO：待补充代码 */
  methods: {
    change() {
      if(this.speed && this.flavour && this.pack)
      this.$emit("change",{
        speed: this.speed,
        flavour: this.flavour,
        pack: this.pack
      });
    }
  },
};
</script>

06 视频弹幕（15 分）

思路

也是dom的一些操作，通过js修改元素style。考试时候做到这因为前面简单的题总是出问题，头都快昏了，题目都没看太进去。现在下来看看也不是很难，就是需要注意处理px单位了。

代码

  // TODO：控制弹幕的显示颜色和移动，每隔 bulletConfig.time 时间，弹幕移动的距离  bulletConfig.speed
  spanEle.innerText = bulletConfig.value;
  spanEle.style.left = getEleStyle(videoEle).width + "px";
  spanEle.style.top = getRandomNum(getEleStyle(videoEle).height) + "px";
  videoEle.appendChild(spanEle);

  let timer = setInterval(() => {
    if (parseInt(spanEle.style.left) < -64) {
      spanEle && videoEle.removeChild(spanEle);
      clearInterval(timer);
    }
    spanEle.style.left = parseInt(spanEle.style.left) - bulletConfig.speed + "px";
  }, bulletConfig.time)
  
  
  // TODO:点击发送按钮，输入框中的文字出现在弹幕中
  let val = document.querySelector("#bulletContent").value;
  renderBullet({
    ...bulletConfig,
    value: val
  },
    videoEle,
    true
  )

07年度明星项目（未找到题）

思路

代码

贴一下官网答案：

在这里插入图片描述

寄。我考试时候咋没看见createItem函数

08 全球新冠疫情数据统计（20 分）

思路

焯！！！考试时候一直监听select的selected事件，一直没有效果。有点怀疑自己了都。

axios.get 获取数据后再渲染
v-model双向绑定select，通过change事件修改选中的item
直接选出x/y轴数据

代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>全球新冠疫情数据统计</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
  <div id="app">
    <header>
      <div>全球新冠疫情数据统计</div>
    </header>
    <main>
      <!-- TODO: 请修改以下代码实现不同国家的数据展示功能 -->
      <div class="title">
        <h2>{{country ? country : "请选择国家"}}</h2>
      </div>
      <div class="boxes">
        <div class="box1">
          <h3>确诊</h3>
          <div class="number">
            <span class="font-bold">新增:{{current.NewConfirmed}}</span>
          </div>
          <div class="number">
            <span class="font-bold">总计:{{current.TotalConfirmed}}</span>
          </div>
        </div>
        <div class="box2">
          <h3>死亡</h3>
          <div class="number">
            <span class="font-bold">新增:{{current.NewDeaths}}</span>
          </div>
          <div class="number">
            <span class="font-bold">总计:{{current.TotalDeaths}}</span>
          </div>
        </div>
      </div>
      <select v-model="country" @change="onSelected">
        <option value="">Select Country</option>
        <!-- 请在此渲染所有国家选项 -->
        <option v-for="item in list" :value="item.Country" @click="onSelected">{{item.Country}}</option>
      </select>
      <div id="chart" style="width: 100%; height: 50vh"></div>
    </main>
  </div>
</body>

<script src="js/axios.min.js"></script>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script>
  var vm = new Vue({
    el: "#app",
    methods: {
      // TODO: 请修改该函数代码实现题目要求
      initChart() {
        // 初始化图表
        this.chart = echarts.init(document.getElementById("chart"));
        this.chartOptions = {
          title: {
            text: "全球感染人数前30国家累计确诊人数统计",
            x: "center",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
              },
            },
          },
          // 设置x轴数据
          xAxis: {
            // 这里需要显示国家名称缩写，因为有些国家的全称太长，会导致界面不美观
            data: this.list.map(item => item.CountryCode),
            axisLabel: {
              show: true,
              interval: 0,
            },
          },
          yAxis: {
            type: "value",
            name: "确诊数量",
          },
          // 设置y轴数据
          series: [
            {
              data: this.list.map(item => item.TotalConfirmed),
              type: "bar",
              itemStyle: {
                normal: {
                  color: "#a90000",
                },
              },
            },
          ],
        };
        // 调用此方法设置 echarts 数据
        this.chart.setOption(this.chartOptions);
      },
      onSelected() {
        if (this.country) {
          this.current = this.list.find(item => {
            return item.Country === this.country
          })
          console.log(this.current);
        }
      }
    },
    // TODO: 请在此添加代码实现组件加载时数据请求的功能
    async mounted() {
      await axios.get("./js/covid-data.json").then(res => {
        this.list = res.data;
      })
      this.initChart();
    },
    data() {
      return {
        list: [],
        country: "",
        current: {
          country: "请选择国家",
          NewConfirmed: 0,
          NewDeaths: 0,
          TotalConfirmed: 0,
          TotalDeaths: 0,
        }
      }
    }
  });
</script>

</html>

09 Makedown（未找到题）

思路

代码

贴
在这里插入图片描述

请添加图片描述

10 组课神器（25 分）

思路

考试看到题目直接空了呜呜

需求一二照着步骤一步一步来就行，需求三在补题的时候还是不想看，鸽到什么时候想看再写

代码

  // TODO：根据请求方式 method 不同，拿到树型组件的数据
  // 当method === "get" 时，localStorage 存在数据从 localStorage 中获取，不存在则从 /js/data.json 中获取
  // 当method === "post" 时，将数据保存到localStorage 中，key 命名为 data
  if (method === "get") {
    if (localStorage.getItem("data")) {
      result = JSON.parse(localStorage.getItem("data"));
    }
    else {
      let e = await axios({ url, method, data })
      result = e.data.data;
    }
  }
  else if (method === "post") {
    localStorage.setItem("data", JSON.stringify(data));
  }
  return result;


function treeMenusRender(data, grade = 0) {
  let treeTemplate = "";
  // TODO：根据传入的 treeData 的数据生成树型组件的模板字符串
  grade++;
  data.forEach((item) => {
    treeTemplate += `
      <div class="tree-node" data-grade="${grade}" data-index="${item.id}">
        <div class="tree-node-content" style="margin-left: ${(grade - 1) * 15}px">
          <div class="tree-node-content-left">
            <img src="./images/dragger.svg" alt="" class="point-svg" />
            ${item.tag
        ? `<span class="tree-node-tag">${item.tag}</span>`
        : ""}
            <span class="tree-node-label">${item.label}</span>
            <img class="config-svg" src="./images/config.svg" alt="" />
          </div>
         ${item.tag
        ? ` <div class="tree-node-content-right">
          <div class="students-count">
            <span class="number"> 0人完成</span>
            <span class="line">|</span>
            <span class="number">0人提交报告</span>
          </div>
          <div class="config">
            <img
              class="config-svg"
              src="./images/config.svg"
              alt=""
            />
            <button class="doc-link">编辑文档</button>
          </div>
        </div>`: ""
      }
      </div>
      ${item.children ? `
      <div class="tree-node-children">
        ${item.children ? treeMenusRender(item.children, grade) : ""}
      </div>
      ` : ""}
    `;
  })
  return treeTemplate;
}

小结

比赛不难，考的都很基础。不过得慢慢来，我做到后面心态有点崩，题都看不下去了。。

需要加强下面几个点：

dom操作
简单正则
记事本写（不用插件

愿自己国赛顺利，也祝看我题解的童鞋们比赛顺利！！！

冰镇白干

关注

3
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
5
评论
第十四届蓝桥杯web组题解

大一参加过蓝桥杯的CB组，也是拿到了山西省省一，省赛完了后就有点懈怠了，果不其然拿了个国优（有道题本地没问题，可能内存爆了）之后学了，也是想着从事这一行，看蓝桥杯新开的这个组也不错，毫不犹豫和舍友报了。考完后我就在群里说了句，整个比赛的体验很差，全程感觉在记事本写，开局看了一下就只有一个插件，连文件都识别不了。。。成绩出了竟然能省一，呜呜山西我滴神，大概40分左右就能拿山西省省一。也就是前五道题做对后面混点分就行。一道布局还原题，使用布局和完成。比赛的时候忘了咋用了，还是用添加背景颜色一步步试出来的（
复制链接

扫一扫