文章目录第十三届蓝桥杯全国软件和信息技术专业人才大赛(软件类)新开了Web应用开发比赛，本文介绍第十三届蓝桥杯Web应用开发的省赛题目以及解析。
- 前言
- 一、水果拼盘
- 二、展开你的扇子
- 三、和手机相处的时光
- 四、灯的颜色变化
- 五、冬奥大抽奖
- 六、蓝桥知识网
- 七、布局切换
- 八、购物车
- 九、寻找小狼人
- 十、课程列表
一、水果拼盘
-
题目描述：使用Flex属性快速完成布局。
-
题目分析：主要涉及的是Flex弹性布局的知识，主要包括主轴方向和是否换行。
-
题目代码：
#pond {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
二、展开你的扇子
- 编写CSS文件，使卡片像扇子一样展开，如下图：
- 题目分析：元素旋转使用transform: rotate(); 鼠标悬停:hover，控制子元素就直接在hover后写子元素即可。
- 题目代码：
#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);
}
#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);
}
三、和手机相处的时光
-
题目描述：修改代码，使Echarts展示的图形正确。
-
题目分析：主要考察Echarts的用法。
-
题目代码：
四、灯的颜色变化
- 页面加载完成3秒后灯的颜色变成红色；6秒后变成绿色。
- 题目分析：主要涉及到js设置css属性的变化。
- 题目代码：
// TODO：完善此函数 显示红色颜色的灯
function red() {
var red = document.getElementById("redlight");
var defaultlight = document.getElementById("defaultlight")
defaultlight.style.display = "none";
red.style.display = "inline";
}
// TODO：完善此函数 显示绿色颜色的灯
function green() {
var green = document.getElementById("greenlight");
var defaultlight = document.getElementById("defaultlight");
var red = document.getElementById("redlight");
defaultlight.style.display = "none";
green.style.display = "inline";
red.style.display = "none";
}
// TODO：完善此函数
function trafficlights() {
setTimeout(item => {
red();
}, 3000)
setTimeout(item => {
green();
},6000)
}
五、冬奥大抽奖
- 题目描述：利用jQuery或者JS做一个抽奖活动：
- 题目分析：主要使用了jQuery中的元素选择、循环、类操作以及排它操作。
- 题目代码：
// TODO：请完善此函数
function rolling() {
time++; // 转动次数加1
clearTimeout(rollTime);
rollTime = setTimeout(() => {
window.requestAnimationFrame(rolling); // 进行递归动画
}, speed);
var text = "";
switch (time % 8) {
case 1:
$("li").removeClass("active")
$("li:eq(0)").addClass('active')
text = $("li:eq(0)").text();
break;
case 2:
$("li").removeClass("active")
$("li:eq(1)").addClass('active')
text = $("li:eq(1)").text();
break;
case 3:
$("li").removeClass("active")
$("li:eq(2)").addClass('active')
text = $("li:eq(2)").text();
break;
case 4:
$("li").removeClass("active")
$("li:eq(5)").addClass('active')
text = $("li:eq(5)").text();
break;
case 5:
$("li").removeClass("active")
$("li:eq(8)").addClass('active')
text = $("li:eq(8)").text();
break;
case 6:
$("li").removeClass("active")
$("li:eq(7)").addClass('active')
text = $("li:eq(7)").text();
break;
case 7:
$("li").removeClass("active")
$("li:eq(6)").addClass('active')
text = $("li:eq(6)").text();
break;
case 0:
$("li").removeClass("active")
$("li:eq(3)").addClass('active')
text = $("li:eq(3)").text();
break;
}
// time > times 转动停止
if (time > times) {
$("#award").text("恭喜您抽中了"+text+"!!!")
clearInterval(rollTime);
time = 0;
return;
}
}
六、蓝桥知识网
- 题目描述：完成如下的首页布局：
- 题目分析：主要涉及的知识为flex布局。
- 题目代码：
蓝桥知识网
首页
热门技术
技术手册
知识库
练习题
联系我们
更多
蓝桥云课
随时随地丰富你的技术栈！
加入我们
人工智能
人工智能亦称智械、机器智能，指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。
前端开发
前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
后端开发
后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的操作功能，例如登录、注册等。
信息安全
ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。
* {
margin: 0;
padding: 0;
font-weight: normal;
text-decoration: none;
list-style: none;
}
.top {
background-color: #a6b1e1;
height: 480px;
}
.top .var {
display: flex;
width: 1024px;
height: 46px;
margin: 13px auto;
justify-content: space-between;
font-size: 16px;
color: white;
line-height: 46px;
}
.top .var .var-right {
display: flex;
}
.top .var .var-right p{
margin-right: 16px;
}
.middle {
display: flex;
width: 1024px;
margin: 0 auto;
flex-direction: column;
align-items: center;
}
.middle h2 {
margin-top: 30px;
font-size: 45px;
color: black;
}
.middle h3 {
margin-top: 62px;
font-size: 21px;
color: white;
font-weight: 200;
}
.middle p {
margin-top: 62px;
padding: 10px;
font-size: 21px;
color: #efbfbf;
font-size: 18px;
font-weight: 200;
border: 1px solid #efbfbf;
border-radius: 2px;
box-shadow: inset 0 0 0 2px #efbfbf;
}
.bottom {
background-color: white;
}
.list {
width: 1024px;
height: 302px;
margin: 0 auto;
margin-top: 74px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.list .text {
width: 502px;
height: 144px;
}
.list .text h2 {
font-size: 30px;
font-weight: 200;
color:black;
}
.list .text p {
font-size: 18px;
color: #aaa;
line-height: 1.4em;
margin-top: 15px;
}
.footer {
display: flex;
width: 1024px;
height: 80px;
margin: 0 auto;
flex-direction: column;
align-items: center;
color: #aaa;
font-size: 14px;
}
.footer :first-child {
margin-top: 30px;
}
.footer :last-child {
margin-top: 10px;
}
七、布局切换
- 题目描述：使用Vue2的知识实现下述功能：
- 题目分析：本题主要涉及了axios数据获取，v-if数据展示，:class的类切换。
- 题目代码：
-
![]()
-
![]()
{{goods.title}}