蓝桥杯第13届 Web 前端组省赛真题做题

蓝桥杯第13届 Web 前端组省赛真题做题

1.水果拼盘

目标

建议使用 flex 相关属性完成 css/style.css 中的 TODO 部分。

1. 禁止修改圆盘的位置和图片的大小。
2. 相同颜色的水果放在相同颜色的圆盘正中间（例如：苹果是红色的就放在红色的圆盘里）。

完成后，页面效果如下：

/* TODO：待补充代码 */
#pond {
  /*使用弹性盒子布局*/
   display: flex;
   /*使用垂直分布*/
   flex-direction:column;
   /*换行*/
   flex-wrap:wrap
}

考查：display弹性布局和相关布局属性

2.展开你的扇子

目标

请完善 css/style.css 文件（请勿修改文件夹中已给出的代码，以免造成判题无法通过）。

当鼠标悬浮在元素上，元素呈扇形展开，页面效果如下所示：

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

具体说明如下：

• 页面上有 12 个相同大小的 div 元素。
• 这 12 个 div 元素具有不同的背景颜色。
• 前 6 个 div 元素（id="item1"~id="item6"）均为逆时针转动，其最小转动的角度为 10 deg，相邻元素间的角度差为 10 deg。
• 后 6 个 div 元素（id="item7"~id="item12"）均为顺时针转动，其最小转动的角度为 10 deg，相邻元素间的角度差为 10 deg。
• 注意，元素 6（id="item6"）和元素 7（id="item7"），各自反方向转动 10 deg，所以它们之间的角度差为 20 deg。

/*TODO：请补充 CSS 代码*/
#box:hover #item1{
  transform: rotate(-60deg);
}
#box:hover #item1{
  transform: rotate(-50deg);
}
#box:hover #item1{
  transform: rotate(-40deg);
}
#box:hover #item1{
  transform: rotate(-30deg);
}
#box:hover #item1{
  transform: rotate(-20deg);
}
#box:hover #item1{
  transform: rotate(-10deg);
}
#box:hover #item1{
  transform: rotate(10deg);
}
#box:hover #item1{
  transform: rotate(20deg);
}
#box:hover #item1{
  transform: rotate(30deg);
}
#box:hover #item1{
  transform: rotate(40deg);
}
#box:hover #item1{
  transform: rotate(50deg);
}
#box:hover #item1{
  transform: rotate(60deg);
}

考查了transform属性的用法，和悬浮的效果属性设置:hover就是当鼠标移到这个位置时，触发该属性的意思。

transform相关的知识点：

transform: rotate(？deg)是旋转多少度的意思
transform：scale(？,？)增加和减少元素缩放
transform：translace(?px,?px)控制元素的移动

3.和手机相处的时间

目标

请修复 index.html 文件中的 Bug。

让页面呈现如下所示的效果：

具体说明如下：

用折线图显示了一周当中，每天使用手机的时长。
index.html 文件里 var option = {} 中的内容是 ECharts 的配置项，该配置中存在 Bug，导致坐标轴显示不正确。
在配置项中，title 是用于设置折线图的标题。
在配置项中，series 是系列，其中的 data 是一周中每天使用手机的时间数据，type 是图表的类型为折线图。

    /*TODO：ECharts 的配置中存在错误，请改正*/
    var option = {
      title: {
        text: "一周的手机使用时长",
      },
      xAxis: {
        type: "category",
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
          type: "line",
        },
      ],
    };

查看echarts官方任何一个例子，就能知道x轴和y轴和数据类型搞反了，x轴是category，y轴是value

4.灯的颜色变化

目标

完成 js/trafficlights.js 文件中的 red、green 和 trafficlights 函数，达到以下效果：

1. 页面加载完成 3 秒后灯的颜色变成红色。
2. 在灯的颜色变成红色的 3 秒后，灯的颜色变成绿色（即 6 秒后灯光变成绿色）。
3. 随后颜色不再变化。
4. 请通过修改 display 属性来显示不同颜色的灯的图片。

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

// TODO：完善此函数 显示红色颜色的灯
function red() {
   setTimeout(()=>{
    //获取到灰色灯泡隐藏
    document.querySelector('#defaultlight').style.display = 'none'
    //获取到红色灯泡显示
    document.querySelector('#redlight').style.display = 'inline-block'
   },3000)
}

// TODO：完善此函数  显示绿色颜色的灯
function green() {
    setTimeout(()=>{
        //获取到红色灯泡隐藏
        document.querySelector('#redlight').style.display = 'none'
        //获取到绿色灯泡显示
        document.querySelector('#greenlight').style.display = 'inline-block'
       },6000)
}

// TODO：完善此函数
function trafficlights(){
    //调用显示红色颜色的灯函数
    red();
    //调用显示绿色颜色的灯函数
    green()
}

5.东奥大抽奖

目标

找到 index.js 中 rolling 函数，使用 jQuery 或者 js 完善此函数，达到以下效果：

1. 点击开始后，以 class 为 li1 的元素为起点，黄色背景（.active 类）在奖项上顺时针转动。
2. 当转动停止后，将获奖提示显示到页面的 id 为 award 元素中。获奖提示必须包含奖项的名称，该名称需与题目提供的名称完全一致。
3. 转动时间间隔和转动停止条件已给出，请勿修改。

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

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

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

// TODO：请完善此函数
function rolling() {
  time++; // 转动次数加1
  num++;//转动数据逐渐递加
  //索引值不能大于8，只有8种奖品
  if(num>8){
    num = 1;
  }
  console.log(time,num);
    
   //添加高亮效果给当前的索引值，同时清除之前转动到的其他奖品 
  $('.li'+num).addClass('active').siblings().removeClass('active')
    
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);

  // time > times 转动停止
  if (time > times) {
    clearInterval(rollTime);
    //将抽中的显示到提示框里
    $('#award').text(`恭喜您抽中了${$('.li'+num).text()}`)
    //清空转动次数和索引值
    time = 0;
    num = 0;
    return;
  }
}

思路：先定义一个num索引值表示当前转到的奖品，然后添加黄色高亮效果，再将转到的奖品信息输入到奖品提示框里，注意记得清空转到次数和索引值

6.购物车

目标

请在 index.html 文件中补全代码，最终实现购物车商品管理的功能。

注意：请勿修改 js/goods.js 文件中提供的数据！

具体需求如下：

（1）修改 addToCart 方法，实现将商品加入到购物车的功能。即：

点击“加入购物车”按钮后，如果购物车中不存在该商品，则将该商品添加到购物车末尾，并初始化数量为 1；
如果购物车中已存在该商品，则只在原数量上 +1 即可。
（2）完善 removeGoods 方法，实现移出购物车商品功能。即：

点击购物车商品后对应的减号（“-”）按钮，将其数量在原数量上 -1；
如果减后数量为 0，则将该商品从购物车中移除。
完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

methods:{
            addToCart(goods){
                // TODO：修改当前函数，实现购物车加入商品需求
                //用来判断购物车里是否有该商品
                let hasGood = false
                this.cartList.forEach(item=>{
                  if(item.id === goods.id){
                    item.num++
                    hasGood = true
                  }
                  
                })
                //如果没有该商品
                if(!hasGood){
                //默认商品数量为1
                  goods.num = 1;
                //将该商品推入到购物车数组中
                  this.cartList.push(goods);
                }
                //JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。
                //JSON.stringify() 方法将一个 JavaScript 值（对象或者数组）转换为一个 JSON 字符串        
                this.cartList = JSON.parse(JSON.stringify(this.cartList));
            },
            removeGoods(goods){
                // TODO：补全代码实现需求
                this.cartList.forEach((item,index)=>{
                  if(item.id=goods.id){
                    item.num--
                    if(item.num<=0){
                    //splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组
                    this.cartList.splice(index);
                   }
                  }
                })
            }

思路：先定义一个变量，用来判断购物车里是否有这个产品，定义了hasGood变量默认值是false，默认购物车里没有该产品，当要添加一件商品时，先遍历购物车中是否有这个商品，如果有就直接在数量上加1，将hasGood改为true，如果没有该商品，就添加该商品，默认商品数量是1；当点击减商品数量时，先遍历出点击的是哪一个商品的，再减，当等于小于0时就要移除该商品了，使用splice(index)移除该商品。

7.寻找小狼人

目标

在本题 index.html 已经给出的数组中，我们可以通过数组的 filter 方法：cardList.filter((item) => item.category == "werewolf") 返回一个都是狼人的新数组。但是技术主管为了考验大家的技术，规定了在代码中任何地方都不能出现 filter 关键字。所以我们需要封装一个 myarray 方法来实现类似数组 filter 的功能。

1. 狼人比较狡猾，筛选狼人的条件可能会变化，例如 item.name，请实现一个通用的方法。
2. 完成封装后，页面效果会自动完成，效果见文件夹下 effect.gif（请使用 VS Code 或者浏览器打开 gif 图片）。

// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
  // TODO：待补充代码
  let newArr = []
  //因为cardList数组调用了myarry函数，所以函数里的this指向的是cardList数组
  let arr =this
  //遍历这个数组，找到符合的狼人，返回的是true
  for (let index = 0; index < arr.length; index++) {
    //cb表示回调函数
    if(cb(arr[index])){
      //遍历到category为werewolf的，就推入到新数组中
      newArr.push(arr[index])
    }
  }
  //返回一个新数组
  return newArr
};

/*
index.html里调用的方法
let newcardList = cardList.myarray(
          (item) => item.category == "werewolf"
        );
         */

思路：创建一个新数组newArr，然后遍历this，因为cardList数组调用了myarry函数，所以函数里的this指向的是cardList数组。将this里的每一个对象传入传进myarray方法的回调函数cb（ 即(item) => item.category == “werewolf”）中，由cb进行判断是否符合条件，如果符合就将这个对象数据加入创建的新数组中，将新数组return返回。

8.课程列表

目标

1. 完成数据请求（数据来源 js/carlist.json）。在项目目录下已经提供了 axios，考生可自行选择是否使用。
2. 完成数据分页显示，每页 5 条数据，默认当前页码为第一页（即 pageNum = 1 ），按照顺序第一页显示 1-5 条，第二页显示 6-10 条，依此类推。将每条数据显示到 list-group 元素中。使用已有代码中 list-group，不要修改 list-group 元素的 DOM 结构。动态渲染时，list-group 示例代码可删除。
3. 当页码为第一页时，上一页为禁用状态（class=disabled），点击无任何变化。
4. 当页码为最后一页时，下一页为禁用状态（class=disabled），点击无任何变化。
5. 在 id 为 pagination 元素中正确显示当前页码和总页码（即最大页码）。当前页码变量使用 pageNum，总页码变量使用 maxPage。请勿修改当前页码和总页码的变量名称，以免造成判题无法通过。

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

// TODO：待补充代码
//显示当前页面数据
function showpage(pageNum,maxPage){
  document.querySelector('#pagination').innerHTML = `共${maxPage}页，当前${pageNum}页`
}

//得到每页数据
function getPageData(data){
  //slice（）是左闭右开，（0，5）是从0取到4的意思，
  return data.slice((pageNum-1)*5,pageNum*5)
}

//渲染每页数据
function renderHtml(pageData){
  //因为PageData里是一个数组，使用map遍历每一项是一个对象，但是innerHTML需要接收的是字符串，所以使用join来拼接字符串
  document.querySelector('#list').innerHTML = pageData.map(item=>`<div id="list">
  <!-- list-group 起始位置  list-group为示例代码，动态渲染时可删除-->
  <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">${item.name}</h5>
        <small>${(item.price / 100).toFixed(2)}元</small>
      </div>
      <p class="mb-1">
        ${item.description}
      </p>
    </a>
  </div>
  <!-- list-group 结束位置 -->
</div>`).join('')
}

let data //总数据
let pageData //每页的数据

axios.get('./js/carlist.json')
.then(res=>{
  data = res.data
  console.log(data)
  //Math.ceil()用于向上取整数计算，返回的是大于或等于函数参数的数值。
  maxPage = Math.ceil(data.length / 5)
  //调取显示当前多少页
  showpage(pageNum,maxPage)
  //得到每页数据
  pageData = getPageData(data)
  console.log(pageData)
  //渲染每页数据
  renderHtml(pageData)
})

// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO：待补充代码
  //下一页移除不能点击事件
  next.classList.remove('disabled')
  pageNum--
  if(pageNum<=1){
    this.classList.add('disabled')
    pageNum = 1
  }
  console.log(pageNum)
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
  // TODO：待补充代码
  //上一页移除不能点击事件
  prev.classList.remove('disabled')
  pageNum++
  if(pageNum>=maxPage){
    this.classList.add('disabled')
    pageNum = maxPage
  }
  console.log(pageNum)
};

9.布局切换

目标

请在 index.html 文件中补全代码，最终实现数据渲染及切换布局的效果。

具体需求如下：

1. 完成数据请求（数据来源 goodsList.json，请勿修改该文件中提供的数据）。在项目目录下已经提供了 axios，考生可自行选择是否使用。效果如下：

1. 点击“列表效果”的图标，图标背景色变为红色（即 class=active），“大图效果”的图标背景色变为灰色（即 class=active 被移除），布局切换为列表效果。效果如下：

1. 点击“大图效果”的图标，图标背景色变为红色（即 class=active），“列表效果”的图标背景色变为灰色（即 class=active 被移除），布局切换为大图效果。效果如下：

<!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="grid-icon" :class="{active:active}" @click="active=true"></a>
        <a class="list-icon" :class="{active:!active}" @click="active=false"></a>
      </div>
      <!--grid 示例代码，动态渲染时可删除-->
      <ul class="grid" v-if="active">
        <li v-for="(item,index) in goodsList" :key="index">
          <a :href="item.url" target="_blank"> <img :src="item.image.large" /></a>
        </li>
      </ul>
      <ul class="list" v-else>
        <li v-for="(item,index) in goodsList" :key="index">
          <a :href="item.url" target="_blank"> <img :src="item.image.small" /></a>
          <p>{{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
        console.log(this.goodsList)
      })
    },
  });
</script>

思路：先定义一个变量来判断是处于什么模式，通过点击切换模式时的点击事件将赋值给该变量，再发送请求获取到页面需要渲染的数据，再同v-if，v-else判断是显示那个模式，最后渲染数据就完成了。

总结

​ 水果拼盘考查的是display弹性盒子的相关布局属性。展开你的扇子考查的是transform属性的运用，和:hover鼠标悬浮触发属性，可以顺带的复习一下transform属性的其他配置项。和手机相处的时光考查的是echarts的x轴和y轴的数值。灯颜色的变化考查的是使用document.querySelector选择器获取某一标签，进行相关的样式修改。东奥大抽奖考查的是代码逻辑，使用$()获取到某一节点进行添加，移除样式操作，$()是jquery的选择器和document.querySelect是一样作用。购物车考查的也是代码逻辑，要先定义一个变量，判断购物车里是否有该商品，使用this.cartList.forEach()遍历购物车，遍历出购物车该商品id就直接加该商品的数量，如果没有则需要将该商品推入到购物车数组，需要注意推入进去的需要是字符串。寻找小狼人，是在已有的函数里进行判断是否符合判断条件，符合的就返回出一个新数组。先定义一个变量来判断是处于什么模式，通过点击切换模式时的点击事件将赋值给该变量，再发送请求获取到页面需要渲染的数据，再同v-if，v-else判断是显示那个模式，最后渲染数据就完成了。