【蓝桥杯Web】第十三届蓝桥杯（Web 应用开发）省赛真题

饭啊饭°

已于 2022-05-16 17:04:32 修改

阅读量1.1w

点赞数 23

分类专栏：蓝桥杯Web 文章标签：前端蓝桥杯 css

于 2022-05-14 21:54:16 首次发布

本文链接：https://blog.csdn.net/weixin_44337386/article/details/124768409

版权

本文详细介绍了第十三届蓝桥杯Web应用开发省赛的十个题目，涵盖Flex布局、CSS动画、Echarts图表、JavaScript事件、Vue2应用、数组操作等知识点，通过题目描述、分析及代码示例，帮助读者理解并掌握相关技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

第十三届蓝桥杯全国软件和信息技术专业人才大赛(软件类)新开了Web应用开发比赛，本文介绍第十三届蓝桥杯Web应用开发的省赛题目以及解析。

一、水果拼盘

题目描述：使用Flex属性快速完成布局。
题目分析：主要涉及的是Flex弹性布局的知识，主要包括主轴方向和是否换行。
题目代码：

#pond {
   
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

在这里插入图片描述

二、展开你的扇子

编写CSS文件，使卡片像扇子一样展开，如下图：
题目分析：元素旋转使用transform: rotate(); 鼠标悬停:hover，控制子元素就直接在hover后写子元素即可。
题目代码：

#box:hover #item7 {
   
  transform: rotate(10deg);
}

#box:hover #item8 {
   
  transform: rotate(20deg);
}

#box:hover #item9 {
   
  transform: rotate(30deg);
}

#box:hover #item10 {
   
  transform: rotate(40deg);
}

#box:hover #item11 {
   
  transform: rotate(50deg);
}

#box:hover #item12 {
   
  transform: rotate(60deg);
}

#box:hover #item6 {
   
  transform: rotate(-10deg);
}

#box:hover #item5 {
   
  transform: rotate(-20deg);
}

#box:hover #item4 {
   
  transform: rotate(-30deg);
}

#box:hover #item3 {
   
  transform: rotate(-40deg);
}

#box:hover #item2 {
   
  transform: rotate(-50deg);
}

#box:hover #item1 {
   
  transform: rotate(-60deg);
}

三、和手机相处的时光

题目描述：修改代码，使Echarts展示的图形正确。
题目分析：主要考察Echarts的用法。
题目代码：

<script>
  var chartDom = document.getElementById("main");
  var myChart = echarts.init(chartDom);
  /*TODO：ECharts 的配置中存在错误，请改正*/
  var option = {
     
    title: {
     
      text: "一周的手机使用时长",
    },
    xAxis: {
     
      // type: "String",
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
     
      // type: "category",
    },
    series: [
      {
     
        data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
        type: "line",
      },
    ],
  };
  myChart.setOption(option);
</script>

四、灯的颜色变化

页面加载完成3秒后灯的颜色变成红色；6秒后变成绿色。
题目分析：主要涉及到js设置css属性的变化。
题目代码：

// TODO：完善此函数 显示红色颜色的灯
function red() {
   
    var red = document.getElementById("redlight");
    var defaultlight = document.getElementById("defaultlight")
    defaultlight.style.display = "none";
    red.style.display = "inline";

}

// TODO：完善此函数  显示绿色颜色的灯
function green() {
   
    var green = document.getElementById("greenlight");
    var defaultlight = document.getElementById("defaultlight");
    var red = document.getElementById("redlight");
    defaultlight.style.display = "none";
    green.style.display = "inline";
    red.style.display = "none";
}

// TODO：完善此函数
function trafficlights() {
   
    setTimeout(item => {
    
        red();
    }, 3000)
    setTimeout(item => {
    
        green();
    },6000)
}

五、冬奥大抽奖

题目描述：利用jQuery或者JS做一个抽奖活动：
题目分析：主要使用了jQuery中的元素选择、循环、类操作以及排它操作。
题目代码：

// TODO：请完善此函数
function rolling() {
   
  time++; // 转动次数加1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
   
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);
  var text = "";
  switch (time % 8) {
   
    case

最低0.47元/天解锁文章