第14届蓝桥杯第3期模拟赛

Code6E

已于 2023-04-05 10:58:44 修改

阅读量122

点赞数

分类专栏：蓝桥杯文章标签：蓝桥杯 css javascript

于 2023-04-05 10:57:05 首次发布

本文链接：https://blog.csdn.net/qq_59200309/article/details/129846941

版权

蓝桥杯专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript实现网页PPT功能，包括键盘事件监听和页面切换。同时，展示了CSS动画在西游记场景中的应用，以及前端表单验证和卡片展示效果。此外，还讨论了Promise的封装技巧和分页组件的设计概念。

摘要由CSDN通过智能技术生成

持续更新中······

1. 网页PPT

此题可以用原生JS也可以用jQuery

// 总页数
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类
  // 当前section显示，其他兄弟section隐藏
  $(".container>section").eq(activeIndex).show().siblings().hide()
  // 改变左下角的页码
  $(".page").text(`${activeIndex+1} / ${sectionsCount}`)
  // 检测是否添加disable类
  if(activeIndex === 0){
    $(".btn.left").addClass("disable")
  }else if(activeIndex === sectionsCount - 1){
    $(".btn.right").addClass("disable")
  }
  // 记得也要检测是否清除disable类
  else{
    $(".btn.left").removeClass("disable")
    $(".btn.right").removeClass("disable")
  }
}

2. 西游记之西天取经

每个子项的animation属性值添加infinite即可

.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;
}

4. 蓝桥校园一卡通

		// 获取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") // 卡片项
		const vail_name=document.getElementById("vail_name")// 姓名错误提示项
		const vail_studentId=document.getElementById("vail_studentId") //学号错误提示项
		submit.onclick = () => {
			// TODO 待补充代码
			// 记得初始时要清除错误提示及错误样式
			vail_name.style.display="none"
			vail_studentId.style.display="none"
			studentName.parentElement.classList.remove("has-error")
			studentId.parentElement.classList.remove("has-error")
			console.log(studentName.value);
			// 不要将正则表达式写成模板字符串形式`/^[\u4e00-\u9fa5]{2,4}$/`
			if(!(/^[\u4e00-\u9fa5]{2,4}$/.test(studentName.value))){
				// 添加错误样式
				studentName.parentElement.classList.add("has-error")
				// 显示错误提示
				vail_name.style.display="block"
			}
			if(!(/^[0-9]{1,12}$/.test(studentId.value))){
				studentId.parentElement.classList.add("has-error")
				vail_studentId.style.display="block"
			}
			if(!(/^[\u4e00-\u9fa5]{2,4}$/.test(studentName.value)) || !(/^[0-9]{1,12}$/.test(studentId.value))){
				return
			}
			// 将表单值填入卡片
			// 因为这里是表单内容，有用户输入的成分，所以不要用innerHTML
			item[0].textContent="姓名："+studentName.value
			item[1].textContent="学号："+studentId.value
			item[2].textContent="学院："+college.value

			// 添加 showCard 类显示放大一卡通的动画，请勿删除
			cardStyle.classList.add('showCard') 
		}
		
		// 这是我自己额外加的复位功能
		// cardStyle.οnclick=function(){
		// 	cardStyle.classList.remove('showCard')
		// 	item[0].textContent=""
		// 	item[1].textContent=""
		// 	item[2].textContent=""
		// 	studentName.value=""
		// 	studentId.value=""
		// 	college.value=""
		// }

5. 会员权益领取中心

很奇怪，写了这么一点都通过了，后续再补充
在这里插入图片描述

<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>
    <header>
      <img src="./images/top_banner.png" alt="">
      <div class="user">
        <img src='./images/touxiang.png'>
        <div></div>
      </div>
    </header>
  </body>
</html>

/* TODO: 待补充代码*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
header{
    height: 240px;
    background-color: #000;
    
}
header>img{
    width: 100%;
}
.user{
    position: absolute;
    left: 1000px;
    top:32px;
    width: 290px;
    height: 176px;
    background-image: linear-gradient(180deg, #191720 0%, #080810 100%);
    border-radius: 4px;
}
.user img{
    position: absolute;
    left: 24px;
    top: 41px;
}

8. 封装Promisefy函数

注意这里有return的嵌套，就是promisefy函数返回的是一个函数，返回的该函数的返回值是一个promise对象

const fs = require('fs')
const path = require('path')
const textPath = path.join(__dirname, '/test.md')

// 读取示例文件
fs.readFile(textPath, 'utf8', (err, contrast) => {
  // 通过promisefy转化为链式调用
  const readFileSync = promisefy(fs.readFile)

  readFileSync(textPath, 'utf8')
    .then((res) => {
      console.log(res === contrast) // 此处结果预期：true，即promise返回内容与前面读取内容一致
    })
    .catch((err) => {})
})

// promisefy()返回一个函数，返回的该函数的返回值是Promise对象
const promisefy = (fn) => {
  // TODO 此处完成该函数的封装
  // ‘...args’表示剩余参数
  return function(...args){
    return new Promise((resolve,reject)=>{
      fn(...args,(err,data)=>{
        if(err) reject(err);
        resolve(data)
      })
    })
  }
}

module.exports = promisefy // 请勿删除该行代码