第十四届蓝桥杯Web应用开发—模拟赛3期--网页PPT--蓝桥校园一卡通--心愿便利贴

文章目录

1：网页PPT (5分) ✔✔✔
2：蓝桥校园一卡通（10分）✔✔✔
3：心愿便利贴 (15分) ✔✔✔

1：网页PPT (5分) ✔✔✔

switchPage( )

switchPage( ){
if(activeIndex ==0 ){$(".btn.left").addClass("disable");$(".btn.right").removeClass("disable");$(".page").text("1 / 5");$(`section:eq(${activeIndex})`).attr("style","display:flex");$(`section:eq(${activeIndex})`).siblings().attr("style","display:none");}if(activeIndex == 1 || activeIndex == 2 || activeIndex == 3){$(".btn.left").removeClass("disable");$(".btn.right").removeClass("disable");$(".page").text(`${activeIndex+1} / 5`);$(`section:eq(${activeIndex})`).attr("style","display:flex");$(`section:eq(${activeIndex})`).siblings().attr("style","display:none");}if(activeIndex == 4){$(".btn.right").addClass("disable");$(".btn.left").removeClass("disable");$(".page").text("5 / 5");$(`section:eq(${activeIndex})`).attr("style","display:flex");$(`section:eq(${activeIndex})`).siblings().attr("style","display:none");}}

解题思路：
如果：页码为1，只能点击右按钮，页码 +1
否则：页码为5：可以点击左按钮，index-1;
如果：页码不是1或5，左右都可以点

拓展:
$(“li:eq(2)”)获取索引为2的li元素
next()方法主要用于获得指定元素的下一个同级元素
prev()方法主要用于获得指定元素的上一级同级元素
siblings()方法主要用于获得指定元素的同级所有元素

*** 页码是显示在网页上的数字1-5，而activeIndex的值是1-4***
注意index.js中已经给出了let activeIndex = 0;
index.js

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类}

从index.js文件中可以看到
1：切换上下一页的按钮，试题中已经给出了，不需要再手动写了
2：只需要在switchPage( )中填充代码即可

2：蓝桥校园一卡通（10分）✔✔✔

如果：输入框一不满足条件1, 给.form-group添加类，显示出错效果
如果：输入框二不满足条件2, 添加类，显示出错效果
如果：前两个输入框判断都通过，验证通过=>将信息添加到卡片上

// 获取DOM元素对象const studentName = document.getElementById("studentName"); // 姓名const studentId = document.getElementById("studentId");  // 学号const college = document.getElementById("college"); // 学院const submit = document.getElementById("submit");  // 制卡按钮const cardStyle = document.getElementById("cardStyle"); // 卡片const item = document.querySelectorAll(".item") // 卡片项let info = document.querySelectorAll(".form-group");let span1 = document.querySelector("#vail_name");let span2 = document.querySelector("#vail_studentId");submit.onclick = () => {// TODO 待补充代码//如果不满足条件1, 给.form-group添加类，显示出错效果//如果不满足条件2, 添加类，显示出错效果//验证通过, 添加类，显示出错效果let reg1 =/[\u4e00-\u9fa5]{2,4}/let reg2 =/^\d{1,12}$/if( (reg1.test(studentName.value)) == false ){span1.style.display= "block"; info[0].className = "form-group has-error";//注意题目要求，不要随意修改class和id名字，所以为了保险，还是加上了原本的form-group类名}if( (reg2.test(studentId.value)) == false){console.log("不满足");span2.style.display= "block"; info[1].className = "form-group has-error";}let items = document.querySelectorAll(".item");if((reg1.test(studentName.value)) == true &&  (reg2.test(studentId.value)) == true){items[0].innerHTML= studentName.value;items[1].innerHTML = studentId.value;items[2].innerHTML = college.value;console.log(studentName.value);cardStyle.classList.add('showCard')// 添加 showCard 类显示放大一卡通的动画，请勿删除}}

3：心愿便利贴 (15分) ✔✔✔

待修改代码：

<div class="card" :class="item.css" v-for="(item,index) in []" :key="index">

v-for="(item,index) in []" 改成v-for="(item,index) in wishList"

未修改前是空数组，渲染不出来数据，相应的页面样式就无法正常显示；空数组修改为wishList后才能出来页面效果

rules: {// TODO 待补充验证的代码name: [{required: true,min: 2,max: 4}, ],content: [{required: true,min: 1,max: 30}]},

拓展知识点：

第十四届蓝桥杯Web应用开发—模拟赛3期--网页PPT--蓝桥校园一卡通--心愿便利贴相关推荐

蓝桥杯 Web 应用开发模拟赛首次公开！参赛选手速进！
第十三届蓝桥杯大赛报名通道正式开启,你行动起来了吗? 很多细心的小伙伴一定看到了,这届蓝桥杯大赛中新增了 Web 应用开发组.这是 Web 应用开发首次出现在杯赛中,所以没有历年真题可以供参赛选手刷题 ...
2022年第十四届“华中杯”大学生数学建模挑战赛
2022年第十三届"华中杯"大学生数学建模挑战赛为了推广我国高校数学建模实践教学,培养学生的创新意识及运用数学方法和计算机技术解决实际问题的能力,第十四届"华中杯& ...
【蓝桥杯Web】2022年第十三届蓝桥杯Web大学组国赛真题解析
前言省赛真题解析见: 2022年第十三届蓝桥杯Web大学组省赛真题解析(完整版) 2022年第十三届蓝桥杯Web大学组省赛真题解析(精华版) 更多蓝桥杯题解请查阅专栏:蓝桥杯之前写省赛解析时篇幅过 ...
2021年第12届蓝桥杯第4次模拟赛真题详解及小结【Java版】
蓝桥杯 Java B组省赛决赛真题详解及小结汇总[2013年(第4届)~2021年(第12届)] 第11届蓝桥杯-第1.2次模拟(软件类)真题-(2020年3月.4月)-官方讲解视频说明:大部 ...
2021年第12届蓝桥杯第3次模拟赛真题详解及小结【Java版】
蓝桥杯 Java B组省赛决赛真题详解及小结汇总[2013年(第4届)~2021年(第12届)] 第11届蓝桥杯-第1.2次模拟(软件类)真题-(2020年3月.4月)-官方讲解视频说明:大部 ...
2020年第11届蓝桥杯第2次模拟赛真题详解及小结【Java版】
蓝桥杯 Java B组省赛真题详解及小结汇总[2013年(第4届)~2020年(第11届)] 注意:部分代码及程序源自蓝桥杯官网视频(历年真题解析) 郑未老师. 2013年第04届蓝桥杯 ...
计蒜客2020蓝桥杯大学A组模拟赛题解
计蒜客2020蓝桥杯大学A组模拟赛题解蓝桥杯的话,去年拿了C++组的国二.今年报名了新成立的Python组,不知道能不能摸到国一的鱼模拟赛链接如下: https://www.jisuanke.co ...
[蓝桥杯第十一届校内模拟赛] Apare_xzc
华中师范大学蓝桥杯第十一届校内模拟赛 2020/3/22 8:00-12:00 题目还是比省赛要简单的,我9:25就做完了. 第一题分析: 简单题,求给定的1200000的正约数的个数.我们可以暴力 ...
2023年第十四届蓝桥杯Web应用开发(职业院校组)省赛真题
前言: 因博主申请的线上考试所以留下了真题,本篇文章只有题目没有答案,因博主技术有限(请理解一下),博主只拿了省二蓝桥杯真题网盘地址: 链接:https://pan.baidu.com/s/1x_J ...

第十四届蓝桥杯Web应用开发—模拟赛3期--网页PPT--蓝桥校园一卡通--心愿便利贴

文章目录

1：网页PPT (5分) ✔✔✔

2：蓝桥校园一卡通（10分）✔✔✔

3：心愿便利贴 (15分) ✔✔✔

第十四届蓝桥杯Web应用开发—模拟赛3期--网页PPT--蓝桥校园一卡通--心愿便利贴相关推荐

最新文章

热门文章

第十四届蓝桥杯Web应用开发—模拟赛3期--网页PPT--蓝桥校园一卡通--心愿便利贴

文章目录

1：网页PPT (5分) ✔✔✔

2：蓝桥校园一卡通 （10分）✔✔✔

3：心愿便利贴 (15分) ✔✔✔

第十四届蓝桥杯Web应用开发—模拟赛3期--网页PPT--蓝桥校园一卡通--心愿便利贴相关推荐

最新文章

热门文章

2：蓝桥校园一卡通（10分）✔✔✔