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

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
            }]
				},

---

---

拓展知识点：