2022年蓝桥杯web前端应用开发题解

01 水果拼盘

题目：

题解：

本题使用 flex 布局可以快速完成，使用 flex-direction 属性将主轴方向改为 y 轴，然后使用 flex-wrap 属性使元素换行

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

02 展开你的扇子

题目

题解

本题主要考察 css3 transform属性，使用rotate规定元素旋转角度，单位为deg,值为负时为逆时针旋转

#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);
}
#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);
}

03 和手机相处的时光

题目

题解

这一题主要考察 echarts 配置中的坐标轴配置

属性	说明	适用对象
value	数值轴	适用于连续数据
category	类目轴	适用于离散的类目数据
time	时间轴	适用于连续的时序数据
log	对数轴	适用于对数数据

 xAxis: {
         type: "category",
      },
      yAxis: {
         type: "value",
      },

04 灯的颜色变化

题目

题解

通过修改元素 display 属性控制显示和隐藏，然后设置计时器控制时间。

// TODO：完善此函数 显示红色颜色的灯
function red() {
  let redlight = document.querySelector("#redlight");
  let defaultlight = document.querySelector("#defaultlight");
  redlight.style.display = "inline-block";
  defaultlight.style.display = "none";
}

// TODO：完善此函数  显示绿色颜色的灯
function green() {
  let redlight = document.querySelector("#redlight");
  let greenlight = document.querySelector("#greenlight");
  redlight.style.display = "none";
  greenlight.style.display = "inline-block";
}

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

05 冬奥大抽奖

题目

题解

思路：

一共有 8 个转盘，所以用转动次数%8 就可以得到当前的元素索引
当转动次数为 8 的整数倍时，设置元素索引为 8
用字符串拼接方式获取当前元素的类名

let classname = `.li${time % 8}`;
if (time % 8 === 0) {
  classname = ".li8";
}

给当前元素添加类名 active，其余兄弟节点移除类名 active

$(`${className}`).addClass("active").siblings().removeClass("active");

转动停止后根据 active 类名获取对应的 li 元素，取其文本值赋值给#award 元素。

let text = $(`.active`).text();
$("#award").text(`恭喜您抽中了${text}!!!`);

完整代码：

let rollTime; // 定义定时器变量用来清除定时器
let time = 0; // 转动次数
let speed = 300; // 转动时间间隔
let times; // 总转动次数

// 开始按钮点击事件后开始抽奖
$("#start").on("click", function () {
  $("#award").text(""); //清空中奖信息
  times = parseInt(Math.random() * (20 - 30 + 1) + 20, 10); // 定义总转动次数，随机20-30次
  rolling();
});

// TODO：请完善此函数
function rolling() {
  time++; // 转动次数加1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 进行递归动画
    let classname = `.li${time % 8}`;
    if (time % 8 === 0) {
      classname = ".li8";
    }
    $(`${classname}`).addClass("active").siblings().removeClass("active");
  }, speed);

  // time > times 转动停止
  if (time > times) {
    let text = $(`.active`).text();
    $("#award").text(`恭喜您抽中了${text}!!!`);
    clearInterval(rollTime);
    time = 0;
    return;
  }
}

06 蓝桥知识网

题目

题解

本题主要考察 html 和 css 布局
可将页面分为 4 部分，分别为 header、banner、content、footer
可以使用 flex 布局以及 grid 布局快速完成页面设计
代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>蓝桥知识网</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <!--TODO：请补充代码-->
    <div class="top">
      <header>
        <div class="headerTitle">蓝桥知识网</div>
        <ul class="nav">
          <li>首页</li>
          <li>热门技术</li>
          <li>使用手册</li>
          <li>知识库</li>
          <li>练习题</li>
          <li>联系我们</li>
          <li>更多</li>
        </ul>
      </header>
      <div class="banner">
        <div class="bannerTitle">蓝桥云课</div>
        <div class="bannerText">随时随地丰富你的技术栈！</div>
        <div class="join">加入我们</div>
      </div>
    </div>
    <div class="content">
      <div class="list">
        <div class="listTitle">人工智能</div>
        <div class="listText">
          人工智能亦称智械、机器智能，指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。
        </div>
      </div>
      <div class="list">
        <div class="listTitle">前端开发</div>
        <div class="listText">
          前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过
          HTML，CSS 及 JavaScript
          以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
        </div>
      </div>
      <div class="list">
        <div class="listTitle">后端开发</div>
        <div class="listText">
          后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的操作功能，例如登录、注册等。
        </div>
      </div>
      <div class="list">
        <div class="listTitle">信息安全</div>
        <div class="listText">
          ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。
        </div>
      </div>
    </div>
    <footer>
      <div>© 蓝桥云课 2022</div>
      <div>京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号</div>
    </footer>
  </body>
</html>

/*
 TODO：请补充代码
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top {
  width: 100%;
  background-color: #a6b1e1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
header {
  padding-top: 13px;
  width: 1024px;
  height: 46px;
  display: flex;
  justify-content: space-between;
}
.headerTitle {
  font-size: 18px;
  color: white;
}

.nav {
  display: flex;
  font-size: 16px;
  color: white;
}
.nav li {
  list-style: none;
  margin-right: 16px;
}
.banner {
  margin-top: 13px;
  width: 1024px;
  height: 427px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bannerTitle {
  margin-top: 30px;
  font-size: 45px;
  color: black;
}
.bannerText {
  margin-top: 62px;
  color: white;
  font-size: 21px;
  font-weight: 200;
}
.join {
  margin-top: 36px;
  color: #efbfbf;
  border-radius: 2px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  box-shadow: inset 0 0 0 2px #efbfbf;
}
.content {
  margin-top: 74px;
  width: 1024px;
  height: 302px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 20px;
}
.list {
  height: 144px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.listTitle {
  font-size: 30px;
  font-weight: 200;
  color: black;
}
.listText {
  font-size: 18px;
  color: #aaa;
  line-height: 1.4em;
}
footer {
  width: 1024px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  color: #aaa;
}
footer div:nth-child(1) {
  margin-top: 30px;
}
footer div:nth-child(2) {
  margin-top: 10px;
}

07 布局切换

题目

题解

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>布局切换</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <script
      src="./js/axios.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
  </head>

  <body>
    <div id="app" v-cloak>
      <!-- TODO：请在下面实现需求 -->
      <div class="bar">
        <a :class="{'active':active}" class="grid-icon " @click="grid()"></a>
        <a :class="{'active':!active}" class="list-icon" @click="list()"></a>
      </div>
      <!--grid 示例代码，动态渲染时可删除-->
      <ul
        :class="active?'grid':'list'"
        v-for="item in goodsList"
        :key="item.url"
      >
        <li>
          <a :href="item.url" target="_blank">
            <img :src="item.image.large"
          /></a>
          <p v-show="!active">{{item.title}}</p>
        </li>
      </ul>
    </div>
  </body>
</html>
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      goodsList: [],
      active: true,
    },
    mounted() {
      // TODO：补全代码实现需求
      axios.get("./goodsList.json").then((res) => {
        this.goodsList = res.data;
      });
    },
    methods: {
      grid() {
        this.active = true;
      },
      list() {
        this.active = false;
      },
    },
  });
</script>

08 购物车

题目

题解

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>购物车</title>
        <script src="./js/goods.js"></script>
        <script type="text/javascript" src="./js/vue.js"></script>
        <link href="./css/index.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <div id="app">
            <!-- 商品列表 -->
            <h3>商品列表</h3>
            <ul id="goodsList">
                <template v-for="goods in goodsList">
        <li class="goods-item" :key="goods.id">
          <div><img :src="goods.imgUrl" /> </div>
          <div>{{goods.name}}</div>
          <div>¥ {{goods.price}} </div>
          <button @click="addToCart(goods)">加入购物车</button>
        </li>
      </template>
            </ul>
            <!-- 购物车 -->
            <template v-if="cartList.length>0">
      <h3>购物车</h3>
      <ul id="cartList">
        <template v-for="goods in cartList">
          <li class="goods-item" :key="goods.id">
            <div><img :src="goods.imgUrl" /> </div>
            <div>{{goods.name}}</div>
            <div>¥ {{goods.price}} </div>
            <div class="item-control">
              <button @click="removeGoods(goods)">-</button>
              <h4>{{goods.num}}</h4>
              <button @click="addToCart(goods)">+</button>
            </div>
          </li>
        </template>
            </ul>
            </template>
        </div>
    </body>

</html>

<script>
    new Vue({
        el: '#app',
        data: {
            cartList: [],
            goodsList: []
        },
        mounted() {
            this.goodsList = GoodsArr;
        },
        methods: {
            addToCart(goods) {
                // TODO：修改当前函数，实现购物车加入商品需求
                let itemIndex = this.cartList.findIndex(item => item.id == goods.id);
                if (itemIndex !== -1) {
                    this.cartList[itemIndex].num++
                } else {
                    goods.num = 1;
                    this.cartList.push(goods);
                }

                this.cartList = JSON.parse(JSON.stringify(this.cartList));
            },
            removeGoods(goods) {
                // TODO：补全代码实现需求
                let itemIndex = this.cartList.findIndex(item => item.id == goods.id);
                if (this.cartList[itemIndex].num > 1) {
                    this.cartList[itemIndex].num--
                } else {
                    this.cartList.splice(itemIndex, 1)
                }
            }
        }
    });
</script>

09 寻找小狼人

题目

题解

首先看一下函数是怎么调用的

let newcardList = cardList.myarray((item) => item.category == "werewolf");

可以看到函数参数为一个回调函数，是要满足的判断条件
所以我们只需要遍历数组找到满足条件的数据存入新数组中
接着把新数组返回即可

// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
  // TODO：待补充代码
  let result = [];
  this.forEach((item) => {
    if (cb(item)) {
      result.push(item);
    }
  });
  return result;
};

10 课程列表

题目

题解

let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数

// TODO：待补充代码
let pagination = document.getElementById("pagination");
let list = document.getElementById("list");
let arr = [];
axios.get("./js/carlist.json").then((res) => {
  arr = res.data;
  //利用ceil向上取整，获取最大页数
  maxPage = Math.ceil(res.data.length / 5);
  showDom(pageNum);
  pagination.textContent = `共${maxPage}页，当前${pageNum}页`;
});
// 将number类型转换成题目给定的货币类型
function fmoney(num) {
  if (!num) return NaN;
  num = num.toString();
  let l = num.split("");
  let i = l.length;
  l.splice(i - 2, 0, ".");
  return l.join("");
}
// 更新DOM的函数
function showDom(index) {
  // 深拷贝
  let Dom = JSON.parse(JSON.stringify(arr));
  // 截取需要展示的5条数据
  let newDom = Dom.splice((index - 1) * 5, 5);
  list.innerHTML = "";

  for (let i = 0; i < newDom.length; i++) {
    const element = newDom[i];
    list.innerHTML += `  <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">${element.name}</h5>
            <small>${fmoney(element.price)}元</small>
          </div>
          <p class="mb-1">
          ${element.description}
          </p>
        </a>
      </div>`;
  }
}
let prev = document.getElementById("prev");
let next = document.getElementById("next");
// 给按钮添加禁用类disabled的函数
function isDisabled() {
  if (pageNum === 1) {
    prev.classList.add("disabled");
  } else {
    prev.classList.remove("disabled");
  }
  if (pageNum === maxPage) {
    next.classList.add("disabled");
  } else {
    next.classList.remove("disabled");
  }
}
isDisabled();
// 点击上一页
prev.onclick = function () {
  // TODO：待补充代码
  if (pageNum > 1) {
    pageNum--;
    showDom(pageNum);
  }
  isDisabled();
  pagination.textContent = `共${maxPage}页，当前${pageNum}页`;
};
// 点击下一页

next.onclick = function () {
  // TODO：待补充代码
  if (pageNum !== maxPage) {
    pageNum++;
    showDom(pageNum);
  }
  isDisabled();
  pagination.textContent = `共${maxPage}页，当前${pageNum}页`;
};

完整题目：
https://gitee.com/Raindropp/lanqiao-topic
完整题解：
https://gitee.com/Raindropp/lanqiao-answer

Q.E.D.

Rido‘s Blog

Rido

2022年蓝桥杯web前端应用开发题解

01 水果拼盘

题目：

题解：

02 展开你的扇子

题目

题解

03 和手机相处的时光

题目

题解

04 灯的颜色变化

题目

题解

05 冬奥大抽奖

题目

题解

06 蓝桥知识网

题目

题解

07 布局切换

题目

题解

08 购物车

题目

题解

09 寻找小狼人

题目

题解

10 课程列表

题目

题解

flex布局

Rido

Rido