蓝桥杯第十四届（web开发）

COMEGy

已于 2024-01-11 17:00:12 修改

阅读量793

点赞数 9

文章标签：前端蓝桥杯学习 echarts

于 2024-01-09 17:23:03 首次发布

本文链接：https://blog.csdn.net/m0_74206393/article/details/135481129

版权

01 电影院排座位（5 分）

思路

利用弹性布局+css子元素选择器

flex-wrap:wrap//换行
.seat:nth-child(n)//第n个孩子

题解

/* TODO：待补充代码 */
.seat-area{
  display: flex;
  flex-wrap: wrap; //换行
  margin-top: 40px;
}
.seat{
  margin-right: 10px;
  margin-top: 10px;
}
.seat:nth-child(8n+2){
  margin-right: 30px;
}
.seat:nth-child(8n+6){
  margin-right: 30px;
}
.seat:nth-child(8n+0){
  margin-right: 0;
}

02图片水印生成

思路

根据传入参数cout 确定生成几个水印文字（利用for循环）

插值语法+模板字符串：渲染页面，利用span标签加载到页面上

题解

function createWatermark(text, color, deg, opacity, count) {
  // 创建水印容器
  const container = document.createElement("div");
  container.className = "watermark";
  // 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手机帛书碎片

思路

es6语法：1.先生成一个集合（自带去重效果），再讲数据加入到集合中

2.将集合转为数组返回

题解

function collectPuzzle(...puzzles) {
  // TODO:在这里写入具体的实现逻辑
  // 对所有的拼图进行收集，获取不同拼图类型的结果，并返回
  let result=new Set()
  for(let i=0;i<puzzles.length;i++){
    for(let j=0;j<puzzles[i].length;j++){
      result.add(puzzles[i][j])
    }
  }
  // console.log(result);
  return [...result]
}

04自适应页面

思路

网格/栅格布局grid由2格改为一格，

题解

/* TODO: 考生需要完成以下内容 */

@media (max-width: 800px) {
  #tutorials .row {
    grid-template-columns: 1fr;
  }
  #tutorials img {
    margin: 0;
  }
  #tutorials .text .box {
    margin-bottom: 15px;
    margin-top: 20px;
  }
  label.icon-menu {
    display: block;
    color: white;
    padding: 0 20px;

    line-height: 54px;
  }
  .menu {
    height: 54px;
    margin-bottom: 25px;
  }
  .menu li {
    display: flex;
    flex-direction: column;
    background-color: #252525;
  }
  .collapse {
    display: none;
  }
  .menu:hover .collapse {
    display: flex;
    flex-direction: column;
  }
  .dropdown:hover ul {
    display: contents;
  }
  .dropdown:hover ul li {
    background-color: white;
  }
}











@media screen and (max-width: 800px) {
  .row {
    grid-template-columns: 1fr;
  }
  .dropdown ul{
    position: relative;
  }
  .collapse {
    display: none;
  }
  label.menu-btn {
    display: block;
    color:white;
    line-height: 53px;
    margin-left: 20px;
    height: 53px;
  }
  input:checked.menu-btn + .collapse{
    display: block;
  }
  .menu li{
    display: block;
  }
}

05全球新冠疫情数据统计

思路

1.利用axios获取json数据，在data中定义参数，同时在页面上利用插值语法绑定数据

2.利用v-for遍历数据，同时给下拉菜单绑定事件，检查数据是否改变

3.根据下拉菜单所选数据的不同获取不同的参数渲染到页面上

题解

<!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" />
  <script src="js/axios.js"></script>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>

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

<script>
  var vm = new Vue({
    el: "#app",
    data:{
      targetCountry:'请选择国家',
      data:[],
      select_data:{
        newComfirmed:0,
        totalConfirmed:0,
        newDeaths:0,
        totalDeaths:0
      }
    },
    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: [
              "US",
              "IN",
              "FR",
              "DE",
              "BR",
              "JP",
              "KR",
            ],
            axisLabel: {
              show: true,
              interval: 0,
            }
          },
          yAxis: {
            type: 'value',
            name: '确诊数量',
          },
          // 设置y轴数据
          series: [
            {
              data: [
                100856162, 44680355, 39560482, 37446795, 36362366, 29489769, 29299166,],
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#a90000'
                }
              }
            },
          ],
        };
        // 调用此方法设置 echarts 数据
        this.chart.setOption(this.chartOptions);
      },


      updatesCountryData(){

      }

    },
    // TODO: 请在此添加代码实现组件加载时数据请求的功能
    async mounted() {
      // let list=await axios.get{'./js/covid-data.json'},
      await axios.get("./js/covid-data.json").then(response=>{
        this.data=response.data
      }).catch(error=>{
        console.log('err')
      })
      console.log(this.data);
      this.initChart();
    },
    watch:{
    selectedCountry(){
      this.updatesCountryData();
    }
  }


  });
</script>

</html>