第十三届蓝桥杯大赛（Web 应用开发）省赛-职业院校组题解
友情链接
第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-大学组
第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-职业院校组
第十四届蓝桥杯（Web 应用开发）模拟赛 2 期-大学组
第十四届蓝桥杯（Web 应用开发）模拟赛 2 期-职业院校组
第十三届蓝桥杯大赛（Web 应用开发）国赛-职业院校组
第十三届蓝桥杯大赛（Web 应用开发）省赛-职业院校组
01 水果拼盘(5 分)
/* TODO：待补充代码 */
#pond {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}02 展开你的扇子 (5 分)
/*TODO：请补充 CSS 代码*/
/* 逆时针 */
#box:hover #item1 {
transform: rotate(-60deg);
}
#box:hover #item2 {
transform: rotate(-50deg);
}
#box:hover #item3 {
transform: rotate(-40deg);
}
#box:hover #item4 {
transform: rotate(-30deg);
}
#box:hover #item5 {
transform: rotate(-20deg);
}
#box:hover #item6 {
transform: rotate(-10deg);
}
/* 顺时针 */
#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 分)
function formSubmit() {
// TODO：待补充代码
// 获取需要操作的节点
const H = document.querySelector('input[name=height]')
const W = document.querySelector('input[name=weight]')
const F = document.querySelector('#quescontent')
const R = document.querySelector('#result')
const M = document.querySelectorAll('input[name=male]')
const P = document.querySelectorAll('input[name=place]')
// 将表单隐藏
F.style.display = 'none'
// 将数据显示
R.style.display = 'block'
// 处理性别
let sex = getOptions(M)[0] === 0 ? '男' : '女'
// 处理地点
let place = placeToStr(getOptions(P))
// 回显数据
R.innerHTML += `
身高${H.value}cm，体重${W.value}kg，性别${sex}，会在${place}锻炼。`
}
// 获取用户选项
function getOptions(list) {
let result = []
list.forEach(e => {
if (e.checked) result.push(e.value)
})
return result
}
// 遍历地点
function placeToStr(o) {
let place = ['公园', '健身房', '户外']
let result = []
o.forEach(e => {
result.push(place[e - 1])
})
return arrayFormat(result)
}
// 将地点格式
function arrayFormat(arr) {
let result = ''
arr.forEach(e => {
result += e + '、'
})
return result.substring(0, result.length - 1)
}04 和手机相处的时光(10 分)
let chartDom = document.querySelector("#main"); //获取dom
let myChart = echarts.init(chartDom); //初始化echarts实例
let option = { //设置图表的配置项
title: { //标题
text: "一周的手机使用时长", //标题文本
},
xAxis: { //x轴
type: "category", //类型--类目轴
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
yAxis: { //y轴
type: "value", //类型--数值轴
},
series: [{ //数据
data: [2.5, 2, 2.6, 3.2, 4, 6, 5], //数据
type: "line", //类型
},{ //数据
data: [3, 5, 2, 4, 2, 5, 6], //数据
type: "line", //类型
},],
};
myChart.setOption(option); //设置option05 请到下一步 (15分)
/*TODO：请补充代码*/
var current_form, next_form, previous_form // 表单域
// 点击下一页的按钮
$('.next').click(function () {
// 获取当前显示的表单
current_form = $(this).parent()
// 通过当前显示的表单获取下一个表单
next_form = current_form.next()
// 控制下一个表单显示，其他表单隐藏
next_form.show().siblings('fieldset').hide()
// 获取当前显示表单的下标
const index = next_form.index() - 1
// 设置步骤条高亮
$('#progressbar li').eq(index).addClass('active')
})
// 点击返回按钮
$('.previous').click(function () {
// 获取当前显示的表单
current_form = $(this).parent()
// 通过当前显示的表单获取上一个表单
previous_form = current_form.prev()
// 控制上一个表单显示，其他表单隐藏
previous_form.show().siblings('fieldset').hide()
// 获取当前显示表单的下标
const index = previous_form.index() - 1
// 设置步骤条高亮
$('#progressbar li').eq(index).addClass('active').next().removeClass('active')
})
// 点击提交按钮
$('.submit').click(function () {
alert('提交成功')
})06 冬奥大抽奖 (15 分)
// TODO：请完善此函数
function rolling() {
time++; // 转动次数加1
clearTimeout(rollTime);
rollTime = setTimeout(() => {
window.requestAnimationFrame(rolling); // 进行递归动画
}, speed);
let $selected = ".li" + index; // 定义选中的奖品
$($selected).addClass("active").siblings().removeClass("active");
// time > times 转动停止
if (time > times) {
// 显示抽奖结果
$("#award").text('恭喜您抽中了' + $($selected).text() + '!!!');
// 重置选择器索引值
index = 1;
clearInterval(rollTime);
time = 0;
return;
}
// 更新选择器索引值
index = index > 8 ? 1 : ++index;
}07 蓝桥知识网(20 分)
主要考使用html和css进行网页搭建，此处省略
08 谁最长 (20 分)
/**
* 封装函数，传入任意数量的数组，返回长度最大的数组集合
*/
const getMaxArrays = (...arrays) => {
// TODO：待补充代码
// 获取所有参数的长度
let lengths = toLength(...arrays)
// 获取参数长度的最大值
let max = getMax(lengths)
// 声明结果数组
let result = []
// 循环判断数组长度
for (let i = 0; i < arrays.length; i++){
// 判断当前数组的长度是否和最大值相等
if (arrays[i].length === max) {
// 相等的话添加到结果数组中
result.push(arrays[i])
}
// 如果某个参数不是数组或者所有数组的长度相同直接返回空数组
if (!Array.isArray(arrays[i]) || result.length === arrays.length) {
return []
}
}
// 返回结果（如果结果只有一个数组元素的话，则返回它本身）
return result.length === 1 ? result[0] : result
};
// 获取参数数组的长度
function toLength(...arrays) {
let lengths = []
arrays.forEach(e => {
lengths.push(e.length)
})
return lengths
}
// 获取最大值（获取最长数组）
function getMax(array) {
let max = array[0]
array.forEach(e => {
max = max < e ? e : max
})
return max
}09 输入搜索联想 (25 分)
搜索名字:
{{col | toUpper}}
{{entry[col]}}