2022 年第十三届蓝桥杯 Web 国赛真题解析

/** * @param {Object} oldArr * @param {Object} num * */const splitArray = (oldArr, num) => {    // TODO：请补充代码实现功能    let newArr = [];        // 升序排序后解构赋值深拷贝给oldArr2    let oldArr2 = [...oldArr.sort((a, b) => a - b)];        const len = oldArr2.length;    for (let i = 0, j = 0; i < len; i += num, j++) {        // splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。        newArr[j] = oldArr2.splice(0, num);    }
    return newArr;};module.exports = splitArray; // 检测需要，请勿删除

/* TODO：待补充代码 */
#box1 {    display: flex;    justify-content: center;    align-items: center;}
#box2,#box3 {    display: flex;    flex-direction: column;    justify-content: space-between;}
#box2 span:nth-child(2),#box3 span:nth-child(3) {    align-self: flex-end;}
#box3 span:nth-child(2) {    align-self: center;}

// TODO：请补充代码function startGame() {    $("img").show(500);    $("#start").hide();    $("img").hide(500);    // 已经点击的数量    let i = 0;    // 存放已经点击的元素    let clickImg = [];
    [...$(".img-box")].forEach((item) => {        item.onclick = function () {            i++;            if (i <= 2) {                $(item.children).show();                clickImg.push(item);
                if (i === 2) {                    setTimeout(() => {                        let score = $("#score")[0];
                        if (                            clickImg[0].children[0].alt ===                            clickImg[1].children[0].alt                        ) {                            score.innerHTML = Number(score.innerHTML) + 2;                            $(clickImg[0]).css({                                // 隐藏元素且保留元素所占位置                                visibility: "hidden",                            });                            $(clickImg[1]).css({                                visibility: "hidden",                            });                        } else {                            score.innerHTML = Number(score.innerHTML) - 2;                            $(clickImg[0].children[0]).hide();                            $(clickImg[1].children[0]).hide();                        }                        clickImg = [];                        i = 0;                    }, 400);                }            }        };    });}

// TODO：请补充代码const btn = document.getElementsByClassName("calc-button");const formula = document.getElementById("formula");const result = document.getElementById("result");
// 计算机表达式展示let showText = "";// 计算结果let num = "";
[...btn].forEach((item) => {    item.onclick = function () {        switch (this.id) {            // 点击 =            case "equal":                // eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。                num = eval(showText.replace("x", "*").replace("÷", "/"));                result.value = num;                return;            // 点击 √            case "sqrt":                num = eval(showText.replace("x", "*").replace("÷", "/"));                num = Math.sqrt(num);                result.value = num;                return;            // 点击 AC            case "reset":                showText = "";                num = "";                formula.value = showText;                result.value = num;                return;            default:                showText += this.innerHTML;                formula.value = showText;                return;        }    };});

$(function () {    // 使用 ajax 获取 userList.json 数据并渲染到页面    getData();
    // 为按钮添加事件    $("#add").click(function () {        // TODO：补充代码，实现功能
        // 获取选中的option        let option = $("#leftSelect option:selected");
        // jQ方法：each() 遍历jQ获取的节点        option.each((index, item) => {            // 删除左侧对应的option            $(`#leftSelect option[value=${item.value}]`).remove();            // 向右侧添加option            $("#rightSelect")[0].add(new Option(item.value, item.value));        });
        changeAccess("管理员", option);    });
    $("#addAll").click(function () {        // TODO：补充代码，实现功能        let option = $("#leftSelect option");        option.each((index, item) => {            $(`#leftSelect option[value=${item.value}]`).remove();            $("#rightSelect")[0].add(new Option(item.value, item.value));        });        changeAccess("管理员", option);    });
    $("#remove").click(function () {        // TODO：补充代码，实现功能        let option = $("#rightSelect option:selected");        option.each((index, item) => {            $(`#rightSelect option[value=${item.value}]`).remove();            $("#leftSelect")[0].add(new Option(item.value, item.value));        });        changeAccess("普通用户", option);    });    $("#removeAll").click(function () {        // TODO：补充代码，实现功能        let option = $("#rightSelect option");        option.each((index, item) => {            $(`#rightSelect option[value=${item.value}]`).remove();            $("#leftSelect")[0].add(new Option(item.value, item.value));        });        changeAccess("普通用户", option);    });});
/** * 修改权限 * @param {Object} right 要修改的权限 * @param {Object} changeList 要修改权限的用户列表 */function changeAccess(right, changeList) {    // TODO：补充代码，实现功能    changeList.each((index, item) => {        // 将option.value与tr.name对应，找到对应的td并修改其内容        // jQ方法：:last 获取最后个元素        $(`#userList tr[name=${item.value}] td:last`).html(right);    });}// 异步获取数据function getData() {    // TODO：补充代码，实现功能    $.ajax("./js/userList.json").then((res) => {        res.forEach((item) => {            // jQ方法：html() 设置html内容            $("#userList tbody").html(                $("#userList tbody").html() +                    ` <tr name=${item.name}>                         <td>${item.name}</td>                         <td>${item.right ? "管理员" : "普通用户"}</td>                       </tr>`            );        });    });}

<!DOCTYPE html><html>
<head>    <meta charset="utf-8" />    <title>一起会议吧</title>    <link rel="stylesheet" type="text/css" href="./css/index.css" />    <link rel="stylesheet" href="./css/iconfont/iconfont.css" /></head>
<body>    <div id="app">        <!-- TODO：请在下面实现需求 -->        <!-- 登录/注销窗口 -->        <div class="login">            <div class="left-tools">                <a class="close-btn"></a>                <a class="shrink-btn"></a>            </div>            <h3>{{isLogin?'注销':'登录'}}</h3>            <p v-if="!isLogin">                选择用户：<select id="selectUser" @change="changeOption($event)">                    <option :value="item.id" v-for="item in list" :key="item.id">{{item.name}}</option>                </select>            </p>            <p v-else>当前用户为：{{loginUser.name}}</p>
            <a class="login-btn" @click="btn">{{isLogin?'注销':'登录'}}</a>        </div>
        <!-- 右侧显示用户列表窗口按钮 -->        <button id="show" class="right-btn" v-if="!showUser&&isLogin" @click="showUser=true">            <span class="iconfont icon-left-arrow"></span>        </button>
        <!-- 用户列表窗口 -->        <div class="user-dialog" v-if="isLogin&&showUser">            <!-- 用户列表窗口上侧工具栏 -->            <ul class="tools">                <li class="tools-left">                    <button :class="{'active':isButton<0}" @click="isButton=-1">                        <span class="iconfont icon-close"></span>                    </button>                    <button :class="{'active':isButton=='0'}" @click="isButton=0">                        <span class="iconfont icon-dialog"></span>                    </button>                    <button :class="{'active':isButton>0}" @click="isButton=1">                        <span class="iconfont icon-list"></span>                    </button>                </li>                <li class="tools-right">                    <button class="show-list" @click="showUser=false">                        <span class="iconfont icon-retract"></span>                    </button>                </li>            </ul>
            <!-- 用户列表 -->            <ul class="say-list">                <li>                    <span class="iconfont icon-microphone"></span>                </li>                <li class="line"></li>                <li>正在讲话：{{list.find(item=>item.isHost).name}}；</li>            </ul>            <ul class="user-list">                <li v-show="isButton>=0">                    <img class="header" :src="loginUser.imgPath" />                    <div class="user-name">                        <span class="iconfont icon-user header-icon" v-if="loginUser.isHost"></span>                        <span class="iconfont icon-microphone"></span> {{loginUser.name}}                    </div>                </li>                <li v-for="item in list" :key="item.id" v-if="item.id!==loginUser.id" v-show="isButton>0">                    <img class="header" :src="item.imgPath" />                    <div class="user-name">                        <span class="iconfont icon-user header-icon" v-if="item.isHost"></span>                        <span class="iconfont icon-microphone"></span> {{item.name}}                    </div>                </li>
            </ul>        </div>    </div>    <script type="text/javascript" src="./js/vue.js"></script>    <script type="text/javascript" src="./js/axios.min.js"></script>    <script type="text/javascript">        // TODO：请在下面实现需求        new Vue({            el: "#app",            data: {                // 用户列表                list: [],                // 选择用户id                value: '1',                // 是否登录                isLogin: false,                // 是否显示用户参会窗口                showUser: true,                // 登录的用户信息                loginUser: {},                // 用户列表显示效果切换的状态                isButton: 0            },            created() {                axios.get('./js/userList.json').then(res => {                    this.list = res.data                })            },            methods: {                btn() {                    this.isLogin = !this.isLogin                    if (this.isLogin) {                        this.loginUser = this.list.find(item => item.id == this.value)                    } else {                        this.loginUser = {}                        this.value = '1'                        this.isButton = 0                        this.showUser = true                    }                },                // 选择下拉框用户时                changeOption(e) {                    this.value = e.target.value                }            }
        });    </script></body>
</html>

<!DOCTYPE html><html>
<head>    <meta charset="UTF-8" />    <title>天气趋势</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <link rel="stylesheet" type="text/css" href="css/style.css" />    <script src="./js/axios.js"></script>    <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>    <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script></head>
<body>    <div id="app">        <div class="top-bar">2022年 Y 城全年温度统计图</div>        <!-- 主体 -->        <div class="container">            <!-- 月份 -->            <div class="month">                <ul>                    <!-- TODO：待补充代码 在下面的 li 标签中完成 12个月份 (即 monthList) 的渲染  -->                    <!-- 选择月份的英文名称等于数据中的key，代表这条数据选中 -->                    <li v-for="(item,key,index) in monthList" :class="[monthName===key?'active':'']" @click="changeMonth(key,index)">                        {{item}}</li>                </ul>            </div>            <div class="chart">                <!-- TODO：待补充代码  -->                <!-- currentMonth  未来七天和本月 tab 切换，只有当前月才显示 -->                <!-- 选择月份的序号（对应月份-1）等于当前月份的标志（当前月份-1）时显示 -->                <div id="currentMonth" v-if="monthNumber===nowMonth">                    <div class="title">                        <h3>{{typeTitle}}</h3>                        <div class="type" @click="clickType($event)">                            <span id="seven" :class="{'active':!type}">未来7天</span>                            <span id="current" :class="{'active':type}">本月</span>                        </div>                    </div>                </div>                <div id="chart"></div>            </div>        </div>    </div></body>
</html><script>    // TODO：待补充代码    var vm = new Vue({        el: "#app",        data: {            chart: null, // 图表            chartOptions: null, // 图表配置项            typeTitle: "本月天气",            monthList: {                January: "1月",                February: "2月",                March: "3月",                April: "4月",                May: "5月",                June: "6月",                July: "7月",                August: "8月",                September: "9月",                October: "10月",                November: "11月",                December: "12月",            },            // 请求到的全部数据            data: [],            // 选择月份的英文名称            monthName: 'January',            // 选择月份的序号（对应月份-1）            monthNumber: 0,            // 当前月份的标志（当前月份-1）            nowMonth: new Date().getMonth(),            // x轴，y轴数据            yData: [],            xData: [],            // 未来7天和本月数据的状态            type: 1        },
        mounted: async function() {            const res = await axios.get('./js/weather.json');            this.data = res.data;            // 初始化x轴和y轴数据            this.yData = res.data[0]['January'];            // 根据y轴温度数据条数的多少判断x轴有多少天            this.xData = [...this.yData.map((e, i) => i + 1)];            // 初始化 echarts            this.$nextTick(() => {                this.initChart();            });        },        methods: {            initChart() {                // 初始化图表                this.chart = echarts.init(document.getElementById("chart"));                // 配置项                this.chartOptions = {                    grid: {                        top: 35,                        bottom: 5,                        left: 10,                        right: 10,                        containLabel: true,                    },                    tooltip: {                        trigger: "axis",                        axisPointer: {                            lineStyle: {                                color: {                                    type: "linear",                                    x: 0,                                    y: 0,                                    x2: 0,                                    y2: 1,                                    colorStops: [{                                        offset: 0,                                        color: "rgba(255,255,255,0)",                                    }, {                                        offset: 0.5,                                        color: "rgba(255,255,255,1)",                                    }, {                                        offset: 1,                                        color: "rgba(255,255,255,0)",                                    }, ],                                    global: false,                                },                            },                        },                    },                    xAxis: [{                        type: "category",                        boundaryGap: false,                        axisLabel: {                            formatter: "{value}",                            fontSize: 12,                            margin: 20,                            textStyle: {                                color: "#bfbfbf",                            },                        },                        axisLine: {                            lineStyle: {                                color: "#e9e9e9",                            },                        },                        splitLine: {                            show: true,                            lineStyle: {                                color: "#f7f7f7",                            },                        },                        axisTick: {                            show: false,                        },                        // x 轴显示的数据，日期                        data: this.xData,                    }, ],                    yAxis: [{                        boundaryGap: false,                        type: "value",                        axisLabel: {                            textStyle: {                                color: "#bfbfbf",                            },                            formatter: `{value}\u2103`,                        },                        nameTextStyle: {                            color: "#fff",                            fontSize: 12,                            lineHeight: 40,                        },                        splitLine: {                            lineStyle: {                                color: "#f7f7f7",                            },                        },                        axisLine: {                            show: true,                            lineStyle: {                                color: "#e9e9e9",                            },                        },                        axisTick: {                            show: false,                        },                    }, ],                    series: [{                        name: "天气",                        type: "line",                        smooth: false,                        showSymbol: false,                        symbolSize: 0,                        zlevel: 3,                        itemStyle: {                            color: "#ff6600",                            borderColor: "#a3c8d8",                        },                        lineStyle: {                            normal: {                                width: 3,                                color: "#ff6600",                            },                        },                        areaStyle: {                            normal: {                                color: new echarts.graphic.LinearGradient(                                    0,                                    0,                                    0,                                    1, [{                                        offset: 0,                                        color: "#ff6600",                                    }, {                                        offset: 0.8,                                        color: "#ff9900",                                    }, ],                                    false                                ),                            },                        },                        //  Y 轴显示的数据，即温度数据                        data: this.yData,                    }, ],                };
                // 调用此方法设置 echarts 数据                this.chart.setOption(this.chartOptions);            },            // 切换月份            changeMonth(month, index) {                this.monthName = month;                this.monthNumber = index;
                this.yData = this.data[index][month];                this.xData = [...this.yData.map((e, i) => i + 1)];
                // 如果切换到了当前月份，将type状态重置以下                if (index === this.nowMonth) {                    this.type = 1                }                this.initChart()            },            // 切换未来7天和本月            clickType(e) {                switch (e.target.id) {                    case "seven":                        this.type = 0;                        // 解构赋值更新x，y坐标轴的数据                        [this.xData, this.yData] = this.getSevenData();                        break;                    case "current":                        this.type = 1                        this.yData = this.data[this.monthNumber][this.monthName]                        this.xData = [...this.yData.map((e, i) => i + 1)]                        break;                }                this.initChart();            },            // 获取未来七天数据            getSevenData() {                let newXdata = [],                    newYdata = [];                // 利用循环一天一天的获取                for (let i = 0; i < 7; i++) {                    // 当前时间                    let now = new Date();                    // now.getTime()为当前时间戳 time为需要获取的那天的时间戳                    let time = now.getTime() + 1000 * 60 * 60 * 24 * i;                    // 用setTime转换，将now转换为需要获取的那天的时间                    // now.setTime(time)既是设置now的日期为：从1970.1.1开始走过time毫秒后的日期                    now.setTime(time);
                    newXdata.push(`${now.getMonth() + 1}/${now.getDate()}`)
                    if (this.monthNumber === now.getMonth()) {                        // 如果当前选择的月份与获取那天的时间所处月份一样，则直接取当前y轴里的数据                        newYdata.push(this.yData[now.getDate() - 1])                    } else {                        // 如果当前选择的月份与获取那天的时间所处月份不同，说明进入到了下一月份，取下一月份的数据                        let nextMonth = this.data[now.getMonth()];                        // 因为不确定月份数据里的key是啥，不能直接取，所以采用for in遍历对象间接获取数据                        for (const key in nextMonth) {                            newYdata.push(nextMonth[key][now.getDate() - 1])                        }                    }                }                return [newXdata, newYdata]

            }        },    });</script>

// menuList 仅为示例数据，非实际使用数据，实际使用数据层级不确定（可能是四级五级六级等），数据结构与 menuList 一致// 1. `parentId` 如果为 `-1`，则表示此条数据为顶级数据。// 2. `parentId` 为该条数据的父级数据的 `id`。
let menuList = [    { parentId: -1, name: "添加管理员", id: 10, auth: "admin" },    { parentId: 10, name: "管理员权限分配", id: 11, auth: "admin-auth" },    { parentId: -1, name: "商品管理", id: 1, auth: "product" },    // { parentId: 6, name: "赤门网络暗杀速度还等哈说", id: 12, auth: "product" },    { parentId: 1, name: "商品列表", id: 4, auth: "productList" },    { parentId: 4, name: "商品分类", id: 5, auth: "category" },    { parentId: 5, name: "添加分类", id: 8, auth: "addClassification" },    { parentId: 4, name: "商品上架", id: 6, auth: "product" },    { parentId: -1, name: "评论管理", id: 2, auth: "comments" },    { parentId: -1, name: "个人中心", id: 3, auth: "profile" },];
/** * @param {*} menuList 传入的数据 * @return {*} menus 转化后的树形结构数据，auths 转化后的权限列表数组 */
const getMenuListAndAuth = (menuList) => {    // TODO：待补充代码    let menus = [],        auths = [],        // emenus存放那些还未找到上级（未被push的项）        emenus = [],        // 项是否被落下（是否未被push）        isDiscard = true;
    // 创建一个能够递归查找push的函数    function addChildren(fat, chil) {        fat.forEach((fatItem) => {            if (fatItem.id === chil.parentId) {                fatItem.children.push(chil);                // 只要项被push了，说明它没有被落下，立即修改isDiscard                isDiscard = false;                return;            } else {                // 递归                addChildren(fatItem.children, chil);            }        });    }
    // 遍历原数据    menuList.forEach((item) => {        // 每一次遍历数据时都提前默认isDiscard为true，因为此时数据还未被push        isDiscard = true;        item.children = [];
        auths.push(item.auth);
        if (item.parentId === -1) {            menus.push(item);            isDiscard = false;        } else {            addChildren(menus, item);            // 一次遍历结束了，如果isDiscard还为true，即还未被push            // 说明这一项的父级还没有出现，为了防止这一项丢失，将它暂存到emenus中            if (isDiscard) {                emenus.push(item);            }        }    });
    // 转换的过程结束了，如果emenus不为空，说明有项被丢弃落下了    // 项被落下的原因是：它的父级比它出现的晚，在顺序遍历到它时，因前面没有它的父级，导致它无法被接收    if (emenus.length !== 0) {        // 这时其它项已经全部加入menus，此时再次将emenus中被落下的项向menus中添加肯定能加上        emenus.forEach((item) => {            addChildren(menus, item);        });    }
    return { menus, auths }; // menus 转化后的树形结构数据，auths 转化后的权限列表数组};
// 请勿删除和修改以下代码try {    module.exports = { getMenuListAndAuth };} catch (e) {}