第十三届蓝桥杯(Web应用开发)模拟赛大学组第二场

yinuo886

已于 2022-03-27 13:26:49 修改

阅读量2.9k

点赞数 7

分类专栏：前端文章标签： javascript css echarts 前端 vue.js

于 2022-03-27 13:25:08 首次发布

本文链接：https://blog.csdn.net/yinuo886/article/details/123770477

版权

本文分享了第十三届蓝桥杯大学组Web应用开发模拟赛的题目解析，涵盖卡片化标签页、随机数生成器、个人博客等10个题目。文章强调了原生JS操作DOM、CSS基本概念、Echarts使用、数组过滤方法在解题中的应用，并提供了部分代码示例。

摘要由CSDN通过智能技术生成

文章目录

蓝桥杯大学组模拟赛第二场(web)

蓝桥杯大学组模拟赛第二场(web)

楼主也是今年参加蓝桥杯web的一名大学生，分享记录下本次模拟题的解析，希望对大家有帮助。（ps：楼主比较喜欢数组的过滤，所以本次能用到过滤的地方都优先使用该方法）

01 卡片化标签页

这里考察原生js的tab栏切换，操作dom要比较熟练，xdm眼熟吗？这是pink老师教的方法，楼主再贴一下jQuery实现，虽然没考。

原生js（题目要求）

var lis = document.querySelectorAll('.tabs div');
    var items = document.querySelectorAll('#content div');
    for (var i = 0; i < lis.length; i++) {
   
        lis[i].setAttribute('index', i);
        lis[i].onclick = function() {
   
            for (var i = 0; i < lis.length; i++) {
   
                lis[i].className = '';
            }
            this.className = 'active';
            var index = this.getAttribute('index');
            console.log(index);
            for (var i = 0; i < items.length; i++) {
   
                items[i].className = '';
            }
            items[index].className = 'active';
        }

    }

jQuery实现（楼楼感觉jQuery代码简单很多）

$(function() {
   
        $('.tabs div').click(function() {
   
            $(this).addClass('active').siblings().removeClass('active');
            var index = $(this).index();
            // $('#content div').eq(index).addClass('active').siblings().removeClass('active');
            $('#content div').eq(index).show().siblings().hide()
        })
    })

02 随机数生成器

题目要求生成不重复的随机数，楼主用了比较离谱的方法，遍历每个数前面的元素，相等的时候重新生成随机数，楼主手动点了接近10分钟的刷新，没得问题。

/**
 * 封装函数，函数名 getRandomNum(min,max,countNum)
 * 生成 min~max 范围的 countNum 个不重复的随机数，存入数组并返回
 */
//生成指定数目和范围的随机数
const getRandomNum = function(min, max, countNum) {
   
    var arr = [];
    // 在此处补全代码
    for (var i = 0; i < countNum; i++) {
   
        arr[i] = Math.ceil(Math.random() * (max - min))
        for (var j = 0; j < i; j++) {
   
            if (arr[j] == arr[i]) {
   
                arr[i] = Math.ceil(Math.random() * (max - min))
            }
        }
    }
    return arr;
};
module.exports = getRandomNum; //请勿删除

03 个人博客

本题考察CSS基本概念

/* TODO:banner 上的文字 需要居中显示 */

.home-wrapper .banner .banner-conent .hero {
   
    margin-top: 3rem;
    text-align: center;
}


/* TODO: main-wrapper 通过设置main-wrapper 布局方式 让.main-left  .main-right 正确显示 */

.main-wrapper {
   
    display: fl