蓝桥杯做题-分阵营，比高低-会员领取中心-网页 PPT-西游记之西天取经-商品销量和销售额实时展示看板-蓝桥校园一卡通
文章目录
1.分阵营，比高低
目标
补充文件 student-grade.js 中的 orderStudentGrade 工具函数，访问 index.html 页面会按照不同的班级，且班级内降序排列所有学生的成绩。最终效果如下：
具体功能说明：
- 接收所有学生成绩的数组。
- 将学生按不同的班级分组，且班级内按照总分降序排列（如果学生 A、B 的总分相同，则按照学生在原数据中的先后顺序进行排列，不要在学生成绩的数据对象中添加多余的字段，确保排序后的对象和排序前一致）。
- 返回分班排序后的对象（如果传入的学生成绩列表为空，则返回一个空对象）
function orderStudentGrade(students) {
// TODO: 在这里写入具体的实现逻辑
// 将学生的成绩按班级分组，同一班级中按照总分从高到底排序
if(students.lenght==0)
//如果学生成绩数组为空则返回空
return {}
//定义一个对象分班级存储的学生成绩
let myclass={};
//遍历学生成绩列表
students.forEach(element => {
//如果该元素的班级不存在该对象中
if(!(element.class in myclass))
{
//就添加该班级进该对象中
myclass[element.class]=[];
}
});
for (const key in myclass) {
//filter()是过滤器，过滤出某个班级
myclass[key]=students.filter(item=>item.class==key)
//sort()函数是用来排序的，默认为升序
myclass[key]=myclass[key].sort((a,b)=>(b.math+b.language+b.english+b.physics+b.chemistry)-
(a.math+a.language+a.english+a.physics+a.chemistry))
}
return myclass
}
module.exports = orderStudentGrade; // 检测需要，请勿删除
考查了对数据处理和排序的问题，遍历学生成绩，然后再细分每个班级的学生，再从高到低排序成绩。遍历使用forEach遍历，element代表每个遍历的数组对象，如果班级相同分到一个对象中，然后使用filter过滤到某个班级，使用sort(）进行排序。
2.会员领取中心
只搭了一个头部，因为页面元素太多了，搭建很费时间，所以只搭了一个头部练练。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>会员权益领取中心</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="box">
<div class="head">
<div class="left-info">
<div class="touxiang"></div>
<div class="Info">
<div class="text1">小蓝同学
<div class="text11">L57</div>
</div>
<div class="text2">已加入蓝桥云课 300天</div>
<div class="text3">会员到期时间： 2022-01-06</div>
</div>
</div>
<div class="id">我的邀请码
<div class="number">7088DCA
<div class="invited">
邀请好友
</div>
</div>
</div>
</div>
</div>
</body>
</html>
/* TODO: 待补充代码*/
/* TODO: 待补充代码*/
*{
margin: 0;
padding: 0;
}
.box{
display: flex;
justify-content: center;
}
.head{
margin: 0;
background:url('../images/top_banner.png') no-repeat;
background-size: 100% 100%;
height: 240px;
width: 1440px;
}
.left-info{
display: flex;
justify-content: space-between;
background-color: black;
z-index: 2;
height:176px;
width: 290px;
margin-left:1000px;
margin-top:32px;
border-radius: 4px;
}
.touxiang{
background-image: url("../images/touxiang.png");
height: 50px;
width: 50px;
position: relative;
top:41px;
left:24px;
}
.Info{
display: flex;
flex-direction: column;
width: auto;
}
.text1{
width: 80px;
height: 20px;
position: relative;
color: white;
top:30px;
right: 50px;
font-size: 20px;
}
.text11{
font-size: 12px;
height:18px;
width: 22px;
color:#FFBF00;
position: absolute;
top:10px;
left: 88px;
}
.text2{
width: 147px;
height: 14px;
position: relative;
top:43px;
color: #FFFFFF;
right: 50px;
font-size: 14px;
}
.text3{
height:12px;
width: 160px;
font-size: 12px;
color: #FFFFFF;
position: relative;
top:55px;
right: 50px;
color: #C6C6C6;
}
.id{
position:absolute;
color:#FFFFFF;
height: 14px;
width: 84px;
left: 1042;
top:162px;
font-size:14px;
}
.number{
position: absolute;
left:89px;
top:0;
color:#FFBF00;
}
.invited{
position: absolute;
top:0;
left:90px;
width: 57px;
height: 20px;
background-color: #FFBF00;
color:#FFFFFF;
font-size: 14px;
line-height: auto;
border-radius: 2px;
}
要注意使用*{margin：0；padding：0}使得元素铺满整个页面，一开始没有使用使得留有白边很丑。
3.网页 PPT
目标
请在 js/index.js 文件中补全代码，具体需求如下：
- 补充
switchPage函数，实现根据activeIndex切换 PPT 页面的功能（切换页面请通过控制section元素的display属性实现），切换页面的同时需要改变左下角的页码(class="page")，格式为"当前页码 / 总页码"，注意。 - 在播放到第一页时给“上一张”按钮
(class="btn left")添加disable类，并在播放到最后一页时给“下一张”按钮(class="btn right")添加disable类，其他情况下则都不添加。页面最终效果如下：
const sectionsCount = $("section").length;
let activeIndex = 0;
// 监听用户按下空格和方向键的事件
$(document).on("keydown", (e) => {
e.preventDefault();
if (e.key === " " || e.key === "ArrowRight") {
goRight();
}
if (e.key === "ArrowLeft") {
goLeft();
}
});
// 监听按钮点击事件
$(".btn.left").click(goLeft);
$(".btn.right").click(goRight);
// 切换下一张的函数
function goLeft() {
if (activeIndex === 0) {
return;
}
activeIndex -= 1;
switchPage();
}
// 切换上一张的函数
function goRight() {
if (activeIndex === sectionsCount - 1) {
return;
}
activeIndex += 1;
switchPage();
}
function switchPage() {
// TODO: 请补充该函数，实现根据activeIndex切换页面的功能，并且在到达最后一页或第一页时给相应的按钮添加disable类
console.log(activeIndex)
//输出查看一下是否页数切换
console.log($("section"))
//回去到每一页的模块标签
let section = $("section")
//先全部的页面都隐藏
$(section).css('display','none')
//点击到那一页就显示那一页
$(section[activeIndex]).css('display','block')
//页码数也要切换
$('.page').text(activeIndex+ 1+'/'+section.length)
//如果点击到第1页
if(activeIndex==0){
//则点击上一页的按钮不能使用
$('.left').addClass('disable')
}else if(activeIndex==4){
//在最后一页不能点击下一页
$('.right').addClass('disable')
}else{
//如果不是这两种情况，就可以两个按钮都可以使用
$('button').removeClass('disable')
}
}
考查的是jquery使用$()获取到页面的标签进行添加属性或者修改css样式。如果标签里没有设置class名，而要添加样式的话，可以使用$('')查找标签，然后$('???').css('display','block')这样来添加样式。如果有class名则使用查找$('.page').text()更改内容。添加class名可以使用$('.right').addClass('disable')添加。
4.西游记之西天取经
目标
- 完成
index.html中的 TODO 部分，完成后让动画无限循环起来，效果如下:
.actor:first-child {
width: 200px;
height: 180px;
background: url(../images/west_01.png) no-repeat;
/* TODO 填空 */
animation: a1 0.8s steps(8) infinite;
}
.actor:nth-child(2) {
width: 200px;
height: 180px;
background: url(../images/west_02.png) no-repeat;
/* TODO 填空 */
animation: a2 0.8s steps(8)infinite;
}
.actor:nth-child(3) {
width: 170px;
height: 240px;
background: url(../images/west_03.png) no-repeat;
/* TODO 填空 */
animation: a3 0.8s steps(8) infinite;
}
.actor:last-child {
width: 210px;
height: 200px;
background: url(../images/west_04.png) no-repeat;
/* TODO 填空 */
animation: a4 0.8s steps(8) infinite;
}
考查css动画效果，在animation动画效果设置里缺了一个infinite是无限循环的配置。
5.商品销量和销售额实时展示看板
目标
请在 js/index.js 文件中补全代码。
最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。
具体需求如下：
- 补全
yAxis的设置，要求“销售额”（即，配置项name）的位置（即，配置项position）在图表的左侧，“销量”（即，配置项name）的位置（即，配置项position）在图表的右侧。 - 补全
renderChart函数中的代码，正确给 X 轴的时间，以及 Y 轴的销售额和销量赋值。
xAxis: {
data: [],
},
// TODO：补全 `yAxis` 的设置，要求“销售额”（即，配置项 `name`）的位置（即，配置项 `position`）在图表的左侧，“销量”（即，配置项 `name`）的位置（即，配置项 `position`）在图表的右侧。
yAxis: [{
type: 'value',
name: '销售额',
position: 'left',
},
{
type: 'value',
name: '销量',
position: 'right',
}],
series: [
{
name: '销售额',
type: 'line',
data: [],
yAxisIndex: 0,
smooth: true
},
{
name: '销量',
type: 'bar',
data: [],
yAxisIndex: 1,
smooth: true
}
]
// 销售额
const saleObj = {};
// 销量
const countObj = {};
......
// TODO：补全代码，正确给 X 轴的时间，以及 Y 轴的商品的销售额 saleObj 和销量赋值 countObj。
charData.xAxis.data = Object.keys(result.data.countObj);
charData.series[0].data = Object.values(result.data.saleObj);
charData.series[1].data = Object.values(result.data.countObj)
考查了使用echarts对数据进行处理，首先要补充完整Y轴的数据设置，y轴两则都有数据，使用的是数组存储数据，左边为销售额，右边为销量。再补充X轴和Y轴渲染的数据来源。
6.蓝桥校园一卡通
目标
请在 index.html 文件中补全代码，具体需求如下：
- 完成表单验证：
- 姓名：2-4 个汉字，验证错误在对应的表单项（
class=form-group）添加类class=has-error，并在下方显示报错信息（即id=vail_name的元素显示）。
tips: 正则中用
[\u4e00-\u9fa5]表示汉字。
- 学号: 1-12 位纯数字，错误即在对应的表单项（
class=form-group）添加类class=has-error，并在下方显示报错信息（即id=vail_studentId的元素显示）。
- 表单验证通过过后，正确显示卡片。在卡片（
class=info）元素下的（class=item）的元素中按照顺序分别显示表单提交的内容：姓名：xxx，学号：xxx, 学院：xxx。
完成后效果如下：
submit.onclick = () => {
// TODO 待补充代码
//点击
//先判断是否是汉字，而且只能填2-4个字，test（）是检测输入的值的
if(!/^[\u4e00-\u9fa5]{2,4}$/.test(studentName.value)){
//.parentNode是获取到父节点，.classList.add是在父节点的class属性里加属性值的意思，如果不是汉字2-4个字符，就加上该属性使得边框变红色
studentName.parentNode.classList.add('has-error')
//如果不是汉字2-4个字符，就在下面显示红色字提醒输入错误
studentName.nextElementSibling.style.display='block'
//并且返回错误
return false
} else{
//输入正确就移除该红色边框属性和项目的提示也不显示
studentName.parentNode.classList.remove('has-error')
studentName.nextElementSibling.style.display='none'
}
if(!/^\d{1,12}$/.test(studentId.value)){
//判断输入的学号是否在1-12位的数字，不是就显示提示和添加红色边框
studentId.parentNode.classList.add('has-error')
studentId.nextElementSibling.style.display='block'
return false
}else{
//输入正确则移除该属性和不显示提示
studentId.parentNode.classList.remove('has-error')
studentId.nextElementSibling.style.display='none'
}
//获取第一个class为item的标签加入姓名显示，下面也是如此
item[0].innerText ='姓名:' +studentName.value
item[1].innerText ='学号:'+ studentId.value
item[2].innerText = '学院'+college.value
// 添加 showCard 类显示放大一卡通的动画，请勿删除
cardStyle.classList.add('showCard')
}
使用模板字符串验证验证输入的内容是否符合，使用测试test（）验证输入的值，如果输入内容不符合，使用.parentNode.classList获取到studentName的父节点再class属性上加上红色字提示输入错误。使用.nextElementSibling.style.display显示红色报错边框。输入正确的话就不显示自提提示和红色边框提示。学号也是这样验证，然后使用item[？].innerText将输入的内容存放到一个数组里用来展示在一卡通上。
总结
分阵营比高低，考查了对数据处理和排序的问题，遍历学生成绩，然后再细分每个班级的学生，再从高到低排序成绩。遍历使用forEach遍历，element代表每个遍历的数组对象，如果班级相同分到一个对象中，然后使用filter过滤到某个班级，使用sort(）进行排序。会员领取中心只搭了一个头部，因为页面元素太多了，搭建很费时间，所以只搭了一个头部练练。提交时竟然检测通过了。会遇到了小问题，要注意使用*{margin：0；padding：0}使得元素铺满整个页面，一开始没有使用使得留有白边很丑。网页 PPT，考查的是jquery使用$()获取到页面的标签进行添加属性或者修改css样式。如果标签里没有设置class名，而要添加样式的话，可以使用$('')查找标签，然后$('???').css('display','block')这样来添加样式。如果有class名则使用查找$('.page').text()更改内容。添加class名可以使用$('.right').addClass('disable')添加。西游记之西天取经，考查css动画效果，在animation动画效果设置里缺了一个infinite是无限循环的配置。商品销量和销售额实时展示看板，考查了使用echarts对数据进行处理，首先要补充完整Y轴的数据设置，y轴两则都有数据，使用的是数组存储数据，左边为销售额，右边为销量。再补充X轴和Y轴渲染的数据来源。蓝桥校园一卡通， 使用模板字符串验证验证输入的内容是否符合，使用测试test（）验证输入的值，如果输入内容不符合，使用.parentNode.classList获取到studentName的父节点再class属性上加上红色字提示输入错误。使用.nextElementSibling.style.display显示红色报错边框。输入正确的话就不显示自提提示和红色边框提示。学号也是这样验证，然后使用item[？].innerText将输入的内容存放到一个数组里用来展示在一卡通上。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
