友情链接
第十四届蓝桥杯（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]}}