您当前的位置: 首页 > 技术文章 > 前端开发

2022年第十三届蓝桥杯web大学组题解

作者: 时间:2022-05-24阅读数: 人阅读

1.水果拼盘

/* TODO:待补充代码 */
#pond {
  flex-direction: column;
  flex-wrap: wrap;
  /* display: flex; */
}

第一道题就是送分题,简单的flex布局中的属性
本题考点:flex布局属性

2.展开你的扇子

/*TODO:请补充 CSS 代码*/
#box:hover>#item1  {
  transform: rotate(-60deg);
}
#box:hover>#item2  {
  transform: rotate(-50deg);
}
#box:hover>#item3  {
  transform: rotate(-40deg);
}
#box:hover>#item4  {
  transform: rotate(-30deg);
}
#box:hover>#item5  {
  transform: rotate(-20deg);
}
#box:hover>#item6  {
  transform: rotate(-10deg);
}
#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);
}

这道题其实也是送分题,可惜我的css没有复习旋转,给忘记了rotate属性,并且旋转角度的单位是deg,导致了这道题白给了,难受啊,唉!!!
本题考点:transform中的rotate属性,这道题非常简单

3.和手机相处的时光

/*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",
        },
      ],
    };
    myChart.setOption(option);

第三道题其实也不难,只要你学习了echarts的基本属性这道题就可以做出来,只需将xAxis和yAxis中的属性互换一下就可以实现效果啦!
本题考点:echarts的相关属性

4.灯的颜色变化

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

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

// TODO:完善此函数
function trafficlights() {
    setInterval(function(){
        red()
        setInterval(function(){
            green()
        },3000)
    },3000)
}

trafficlights();

本题其实难度也不大,根据题中的要求,封装函数,主要是使用定时器以及使用js操作dom
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
本题考点:setInterval()方法的使用,以及使用js操作dom

5.东奥大抽奖

// TODO:请完善此函数
function rolling() {
  time++; // 转动次数加1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);
  // 当前li
  let liClass = '.li' +  (time <= 8 ? time % 9 :(time - 1) % 8 + 1)
  // 清除所有的li的active
  $('li').removeClass('active')
  // 添加当前li
  $(liClass).addClass('active')
  //获取当前li的文本
  let text = $(liClass).text()
  // time > times 转动停止
  if (time > times) {
    clearInterval(rollTime);
    $("#award").text(`恭喜你中奖${text}!!`);
    time = 0;
    return;
  }
}

这道题参考了一位大佬的解题思路,这道题的重点是找出来当前li,我考试中使用了遍历去做,但是并没有做出来,觉得是当前li获取的有问题
本题考点,使用jquery实现功能,对样式类名的修改,灵活获取当前的小li

6.蓝桥知识网

在这里插入图片描述

本题是布局题目,实现效果有很多办法,这里就不给大家上代码了,考试中我使用的是flex布局

7.布局切换

渲染页面代码:

    <div id="app" v-cloak>
      <!-- TODO:请在下面实现需求 -->
      <div class="bar">
        <a :class=" isActive ? 'grid-icon active' : 'grid-icon' " @click="one"></a>
        <a :class="isActive ? 'list-icon' : 'list-icon active'" @click="two"></a>
      </div>
      <ul v-for="(item,index) in goodsList" :key="index" :class="isActive ? 'grid' : 'list'">
        <li>
          <a href="#/3814" target="_blank">
            <img :src="item.image.large" alt="">
          </a>
          <p v-if="!isActive">{{item.title}}</p>
        </li>
      </ul>
    </div>

功能实现代码:

<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      isActive: true,
      goodsList: [],
    },
    mounted() {
      // TODO:补全代码实现需求
      axios.get('./goodsList.json').then(res=>{
        this.goodsList = res.data
        console.log(this.goodsList);
      })
    },
    methods: {
      one() {
        this.isActive = true
      },
      two() {
        this.isActive = false
      }
    }
  });
</script>

这道题主要是去考察vue中的一些操作dom的方法,比如动态class,以及考察了vue-axios去获取数据进行渲染,只要多去思考一下这道题就可以做出来了
本题考点:使用vue中的一些常用指令去实现功能

8.购物车

            addToCart(goods){
                // TODO:修改当前函数,实现购物车加入商品需求
                let index = this.cartList.findIndex(item => item.name == goods.name)
                if(index == -1) {
                  goods.num = 1;
                  this.cartList.push(goods);
                }
                else {
                  this.cartList[index].num +=1
                }
                this.cartList = JSON.parse(JSON.stringify(this.cartList));
            },
            removeGoods(goods){
                // TODO:补全代码实现需求
                let index = this.cartList.findIndex(item => item.name == goods.name)
                if(this.cartList[index].num>1) {
                  this.cartList[index].num--
                }
                else {
                  this.cartList.splice(index,1)
                }
                this.cartList = JSON.parse(JSON.stringify(this.cartList));
            }

这道题说多了都是泪,这道题做了快一个小时没给弄出来,导致后两题都没有时间看了,我在做题中犯了一个非常大的错误,就是使用了indexOf()去判断goods,这样的结果是并不能解决点击购物车还会出现新的重复商品的问题,这样就直接导致了这道题的失败
本题考点:使用es6中的数组方法findIndex()去做一个类似于filter()的过滤,返回的是根据条件所找到对应对象的索引,然后根据索引进行相关操作

9.寻找小狼人

// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
  // TODO:待补充代码
  const arr = Object.create(this)
    const filterArr = [] // 没有符合条件的返回空数组
    for (let i = 0; i < arr.length; i++) {
        const res = cb(arr[i])
        if (res) {
            filterArr.push(arr[i])
        }
    }
  return filterArr
};

这道题就是让考生手写一个过滤函数,想写出来必须要理解filter()的实现原理,博客中有许多大佬发布了手写filter()函数的原生源码,非常值得大家去学习,这道题我没有怎么去看(主要是时间被耽误了),但是从这道题看出来js中封装的一些函数,必须要搞清楚它实现的原理
本题考点:手写一个filter()

10.课程列表

let pageNum = 1; // 当前页码,默认页码1
let maxPage; // 最大页数
let list = []
// TODO:待补充代码
let nameDom = document.querySelectorAll('.mb-1')[0]
let descriptionDom = document.querySelectorAll('.mb-1')[1]
let priceDom = document.querySelector('small')
let paginationDom = document.querySelector('#pagination')
let data;
function changeText(obj) {
  nameDom.innerText = obj.name 
  descriptionDom.innerText = obj.description
  priceDom.innerText = obj.price + '元'
  paginationDom.innerHTML = `${maxPage} 页,当前第 ${pageNum}`
}
axios.get('./js/carlist.json').then(res => {
  maxPage = res.data.length
  data = res.data
  if(maxPage) {
    changeText(res.data[0])
  } 
  paginationDom.innerHTML = `${maxPage} 页,当前第 ${pageNum}`
})
// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO:待补充代码
  console.log(pageNum);
  if(pageNum <= 1) {
    prev.className = 'page-item disabled'
    return 
  } 
  pageNum--
  if(pageNum < maxPage) {
    next.classList.remove('disabled')
  }
  changeText(data[pageNum - 1])
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
  // TODO:待补充代码
  console.log(pageNum);
  if(pageNum >= maxPage) {
    next.className = 'page-item disabled'
    return
  } 
  pageNum++
  if(pageNum > 1) {
    prev.classList.remove('disabled')
  }
  changeText(data[pageNum - 1])
};

这道题看了一位大佬的代码,这道题考察的是使用原生js和axios实现分页功能,难度应该是有的,自从使用vue+elementui去开发项目,大多都是封装的分页,又在警示我们必须要搞懂原生实现的原理
本题考点:原生js实现分页功能

本次蓝桥总结:

  1. 本次的考试,让我明白了前端工程师必须要具备原生开发的能力,你的逻辑处理能力必须要具备一个高水平
  2. 蓝桥杯的考察点专注于原生和基础,通过考试我也意识到了自己的原生处理能力存在很大的缺陷,在以后的学习中必须要每天抽出时间用原生写一个小demo
  3. 还是欠缺独立思考的能力,审题也没用认真去审,导致出现了一系列的错误
  4. 整体来说的话,还是自己的知识储备存在较大的差距,还是需要慢慢的认真学习吧,学的东西要经常去回顾经常去看,多去思考,多去探索。

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

标签: 前端
加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦

天猫38节现货-全屋智能