第十三届蓝桥杯(Web应用开发)省赛 大学组

蓝桥杯大学组省赛(web)

博主也是参加了本次的比赛，没有发挥好吧，本该会写的题比赛时没写起，就很无奈，当然在线上考试也很多因素，当时拿到题时，感觉比第二模拟赛难挺多的，楼主也是复习重点偏了，jQuery认真看了，原生js有点疏忽，所以打好基础是很重要的。博主还是比较热爱前端，所以即使发挥不好，也记录下本次自己的想法，题解。

01 水果拼盘（5分）

Todo：相同颜色的水果放在相同颜色的圆盘正中间。
思路：flex布局，使用flex-direction和flex-wrap属性即可实现。

代码实现
这一题flex-wrap是关键，就绝定你能不能成功。

/* TODO：待补充代码 */

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

02 展开你的扇子（5分）

Todo：当鼠标悬浮在元素上，元素呈扇形展开

代码实现：
本题楼主比赛时，居然没看，比完赛感觉还是挺简单的一道题。所以大家不要把时间压在后面高分的大题上，楼主本次就是吃了这样的亏，以为能搞出来，结果后面没搞出来，时间不多的时候就不知道怎么把握时间了。

/*TODO：请补充 CSS 代码*/

#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 和手机相处的时光（10分）

本题就是比较常规，还是可以试出来，试不出来也许是运气不好吧。
代码实现：

/*TODO：ECharts 的配置中存在错误，请改正*/
    var option = {
   
        title: {
   
            text: "一周的手机使用时长",
        },
        xAxis: {
   

            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],

        },
        yAxis: {
   

            type: "value",
            data: [0, 1, 2, 3, 4, 5, 6],

        },
        series: [{
   
            data: [2.5, 2, 2.6, 3.2, 4, 6, 5],

            type: "line",
        }, ],
    };

04 灯的颜色变化（10分）

Todo：

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

代码实现：
这道题楼主就是把原生的js跟jQuery搞混了，jQuery用css，当时我比赛的时候也是用的.css，然后就以css试了很多种排列组合，哈哈哈，就差一步，其他代码都是下面一样的，所以大家平时学习的时候一定不要眼高手低，要动手，多敲多思考。

// TODO：完善此函数 显示红色颜色的灯
function red() {
   


    setTimeout(() => {
   
        document.querySelector("#defaultlight").style = 'display :none';
        document.querySelector("#redlight").style = 'display:inline-block';
        document.querySelector("#greenlight").style = 'display:none';
    }, 3000)


}

// TODO：完善此函数  显示绿色颜色的灯
function green() {
   

    setTimeout(() => {
   
        document.querySelector("#defaultlight").style = 'display :none';
        document.querySelector("#redlight").style = 'display:none';
        document.querySelector("#greenlight").style = 'display:inline-block';
    }, 6000);

}

// TODO：完善此函数
function trafficlights() {
   

    window.onload = function() {
   
        red();