【Html.js——功能实现】蓝桥校园一卡通（蓝桥杯真题-2421）【合集】

Rossy Yan

发布于 2025-02-10 13:49:10

6500

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

准备步骤

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

├── css
│   ├── wish.css 
│   └── index.css
├── images   
│   └── college.jpg 
└── index.html

其中：

index.html 是主页面。
images 是图片文件夹。
css 是样式文件夹。

注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。

wget https://labfile.oss.aliyuncs.com/courses/18164/card.zip && unzip card.zip && rm card.zip

在浏览器中预览 index.html 页面，显示如下所示：

在初始化的时候输入框并没有做验证，卡片内容也无法正常显示。

目标效果

请在 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。

完成后效果如下：

要求规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。
满足需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动检测。

判分标准

本题完全实现题目目标得满分，否则得 0 分。

通关代码✔️

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>蓝桥校园一卡通</title> 
	<link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css" /> 
  </head> 
  <body>
    <div id="app"> 
		<div class="form">
			<div class="card" id="cardStyle">
				<div class="cardName">蓝桥校园一卡通</div>
				<div class="info"> 
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
				</div>
			</div>
			<div class="content">
				<div class="form-group">
				    <label for="studentName">姓名</label>
				    <input type="text" class="form-control" id="studentName" placeholder="请输入姓名" aria-describedby="inputSuccess2Status">
					<span id="vail_name" style="display: none;" class="help-block"> 姓名是2-4个汉字，请您检查输入的内容</span>
				</div>
				<div class="form-group">
				    <label for="studentId">学号</label>
				    <input type="number" class="form-control" id="studentId" placeholder="请输入学号">
					<span id="vail_studentId" style="display: none;" class="help-block"> 学号是1-12位的数字，请您检查输入的内容</span>
				</div>
				<div class="form-group">
				    <label for="college">学院</label>
				    <select id="college" class="form-control">
				      <option value="软件工程学院">软件工程学院</option>
				      <option value="信息技术学院">信息技术学院</option>
				      <option value="数字媒体学院">数字媒体学院</option>
				      <option value="计算机科学学院">计算机科学学院</option> 
				    </select>
				</div> 
				<button id="submit">制卡</button> 
			</div>
		</div>
    </div> 
    <script> 
	    // 获取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") // 卡片项
		
submit.onclick = () => {
            // TODO 待补充代码
            if(!/^[\u4e00-\u9fa5]{2,4}$/.test(studentName.value)){
                studentName.parentNode.classList.add('has-error')
                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)){
                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'
            }
            item[0].innerText = '姓名:' + studentName.value
            item[1].innerText = '学号:' + studentId.value
            item[2].innerText = '学院:' + college.value
            // 添加 showCard 类显示放大一卡通的动画，请勿删除
            cardStyle.classList.add('showCard') 
        }
    </script>
  </body>
</html>

代码解析📑

一、HTML 部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>蓝桥校园一卡通</title> 
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css" /> 
  </head> 
  <body>
    <div id="app"> 
      <div class="form">
        <div class="card" id="cardStyle">
          <div class="cardName">蓝桥校园一卡通</div>
          <div class="info"> 
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
          </div>
        </div>
        <div class="content">
          <div class="form-group">
            <label for="studentName">姓名</label>
            <input type="text" class="form-control" id="studentName" placeholder="请输入姓名" aria-describedby="inputSuccess2Status">
            <span id="vail_name" style="display: none;" class="help-block"> 姓名是2-4个汉字，请您检查输入的内容</span>
          </div>
          <div class="form-group">
            <label for="studentId">学号</label>
            <input type="number" class="form-control" id="studentId" placeholder="请输入学号">
            <span id="vail_studentId" style="display: none;" class="help-block"> 学号是1-12位的数字，请您检查输入的内容</span>
          </div>
          <div class="form-group">
            <label for="college">学院</label>
            <select id="college" class="form-control">
              <option value="软件工程学院">软件工程学院</option>
              <option value="信息技术学院">信息技术学院</option>
              <option value="数字媒体学院">数字媒体学院</option>
              <option value="计算机科学学院">计算机科学学院</option> 
            </select>
          </div> 
          <button id="submit">制卡</button> 
        </div>
      </div>
    </div> 
    <script> 
      // ... JS 代码 ...
    </script>
  </body>
</html>

功能概述

HTML 部分主要负责构建页面的结构，创建了一个校园一卡通制卡的表单界面，包含了卡片展示区域和用户输入信息的表单区域。

详细解释

头部信息：设置了字符编码、视口信息和页面标题，并引入了 Bootstrap 框架的 CSS 文件和自定义的 CSS 文件。
主体内容：
- <div id="app">：作为整个应用的容器。
- <div class="form">：表单的外层容器，包含卡片和表单内容。
- <div class="card" id="cardStyle">：校园一卡通卡片的容器，包含卡片名称和信息展示区域。
- <div class="content">：用户输入信息的表单区域，包含姓名、学号、学院的输入框和选择框，以及制卡按钮。
- <span> 元素：用于显示输入验证的错误提示信息，初始状态为隐藏。

二、CSS 部分

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom , #68eacc 30%,#497be8 70%);
  overflow: hidden;
}

.form {
  height: 470px;
  margin: 160px auto;
  max-width: 450px;
  width: 100%;
  background-color: white;
  border-radius: 5px; 
  position: relative;
}

.form > .card {
  width: 300px;
  height: 180px;
  border-radius: 5px; 
  position: absolute;
  left: 0;
  right: 0;
  top: -90px;
  margin: auto;
  background: #497be8 url("../images/college.jpg") no-repeat;
  background-position: 0 35px;
  background-size: 100% 145px;
  box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4);
  z-index: 100;
}

.cardName { 
  height: 35px;
  line-height: 35px; 
  letter-spacing: 3px;
  overflow: hidden;
  text-align: center;
  font-size: 16px;
  color: #fff;   
}

.form > .card > .info { 
  font-weight: bold;
  width: 220px; 
  margin: 20px auto; 
  color: #fff;
}

.form > .card > .info > .item {
  padding: 5px 30px 5px; 
  text-shadow: 1px 1px black;
}

.form > .content {
  width: 300px;
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
  margin: auto; 
}

button {   
  margin-top: 25px;
  width: 100%;
  padding: .7em; 
  border: none;
  color: white;
  border-radius: 5px;
  letter-spacing: 2px;
  font-size: 14px; 
  background: linear-gradient(90deg,#0162c8,#55e7fc);
  position: relative;
  /* overflow: hidden; */
} 
button:hover {
  cursor: pointer;
} 

.showCard {
  animation: showCard 0.4s forwards
}

@keyframes showCard {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2.5) translateY(88px) rotate(5deg);
  } 
}

功能概述

CSS 部分负责为页面元素添加样式，使页面具有良好的视觉效果，包括背景、卡片样式、表单样式和动画效果。

详细解释

全局样式：使用 * 选择器将所有元素的外边距和内边距设置为 0，并采用 box-sizing: border-box 盒模型。
页面背景：为 body 元素设置了渐变背景，并隐藏溢出内容。
表单样式：设置了表单的高度、宽度、背景颜色和圆角，使用 position: relative 为内部的绝对定位元素提供参考。
卡片样式：设置了卡片的尺寸、背景、阴影和位置，使其显示在表单上方。
卡片信息样式：设置了卡片名称和信息项的样式，包括字体颜色、大小和间距。
表单内容样式：设置了表单内容区域的宽度和位置。
按钮样式：设置了按钮的样式，包括背景渐变、圆角和鼠标悬停效果。
动画效果：定义了 showCard 动画，当卡片元素添加 showCard 类时，卡片会在 0.4 秒内放大、向下移动并旋转 5 度。

三、JavaScript 部分

// 获取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") // 卡片项

submit.onclick = () => {
  if (!/^[\u4e00-\u9fa5]{2,4}$/.test(studentName.value)) {
    studentName.parentNode.classList.add('has-error')
    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)) {
    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'
  }
  item[0].innerText = '姓名:' + studentName.value
  item[1].innerText = '学号:' + studentId.value
  item[2].innerText = '学院:' + college.value
  // 添加 showCard 类显示放大一卡通的动画，请勿删除
  cardStyle.classList.add('showCard') 
}

功能概述

JS 部分负责实现表单验证和信息显示功能，当用户点击制卡按钮时，会对输入的姓名和学号进行格式验证，验证通过后将信息显示在卡片上，并触发卡片放大的动画效果。

详细解释

获取 DOM 元素：使用 document.getElementById() 和 document.querySelectorAll() 方法获取页面上的元素对象。
绑定点击事件：为制卡按钮的 onclick 事件绑定一个箭头函数，当按钮被点击时执行该函数。
姓名验证：使用正则表达式 /^[\u4e00-\u9fa5]{2,4}$/ 验证姓名是否为 2 到 4 个汉字。如果验证不通过，为输入框的父元素添加 has-error 类，并显示错误提示信息；如果验证通过，移除 has-error 类并隐藏错误提示信息。
学号验证：使用正则表达式 /^\d{1,12}$/ 验证学号是否为 1 到 12 位的数字。验证逻辑与姓名验证类似。
显示信息和动画效果：如果姓名和学号验证都通过，将用户输入的姓名、学号和选择的学院信息显示在卡片的信息项中，并为卡片元素添加 showCard 类，触发卡片放大的动画效果。