admin管理员组文章数量:1566356
文章目录
- 蓝桥杯大学组省赛(web)
-
- 01 水果拼盘（5分）
- 02 展开你的扇子（5分）
- 03 和手机相处的时光（10分）
- 04 灯的颜色变化（10分）
- 05 冬奥大抽奖（15分）
- 06 蓝桥知识网（15分）
- 07 布局切换（20分）
- 08 购物车（20分）
- 09 寻找小狼人（25分）
- 10 课程列表（25分）
蓝桥杯大学组省赛(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：
- 页面加载完成3秒后灯的颜色变成红色
- 在灯的颜色变成红色的3秒后，灯的颜色变成绿色（即6s后灯光变成绿色）
- 随后颜色不再改变
- 请通过修改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();
版权声明：本文标题：第十三届蓝桥杯(Web应用开发)省赛 大学组 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1725735344a1039657.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论