【JavaScript——函数编写】请到下一步（蓝桥杯真题-7326）【合集】

Rossy Yan

发布于 2025-03-27 09:12:22

38200

代码可运行

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

运行总次数：0

代码可运行

背景介绍

我们注册一个账号，经常会用到步骤条填写资料，本题需要使用 jQuery 去实现步骤条表单的切换。

准备步骤

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

├── css
│   └── style.css
├── js
│   ├── index.js
│   └── jquery-3.6.0.min.js
├── effect.gif
└── index.html

其中：

css/style.css 是样式文件。
js/index.js 是实现步骤条表单切换的 js 文件。
js/jquery-3.6.0.min.js 是 jQuery 文件。
effect.gif 是最终实现的效果图。
index.html 是主页面。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/10591/05.zip && unzip 05.zip && rm 05.zip

在浏览器中预览 index.html 页面，当前点击下一页的按钮，不会切换到第二页表单，效果显示如下所示：

目标效果

请补充 js/index.js 文件中的代码，实现点击按钮页面上的表单可以切换（表单的切换操作，只能使用 display 属性来控制）：在步骤一点击下一页按钮，会切换到步骤二的表单，页面显示如下：

在步骤二点击返回按钮，会切换到步骤一的表单，页面显示如下：

在步骤二点击下一页按钮，会切换到步骤三的表单，页面显示如下：

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

具体说明如下：

在 index.html 文件中，<form> 标签里是整个表单的内容，整个表单被分为三个表单域，对应着三个步骤条上的表单。
在 index.html 文件中，<ul> 实现了步骤条的布局，每对 <li> 代表一个步骤，默认第一个步骤条（个人信息）被激活（class="active"），也就是具有 .active 的样式属性。
在 css/style.css 文件中，对表单和步骤条的样式进行了设置，使用 :not 选择器和 display:none 实现了分步骤表单的显示/隐藏效果。

要求规定

请勿修改 index.html、css/style.css、jquery-3.6.0.min.js 文件中的任何内容。
表单的切换操作，只能使用 display 属性来控制。
请严格按照考试要求来做题，切勿修改考试默认提供项目中的文件名称、文件夹路径等，以免造成无法判题通过。

判分标准

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

通关代码✔️

// 获取所有的 fieldset 元素
let forms = document.querySelectorAll("fieldset")
// 获取步骤条中的所有 li 元素
let lists = document.querySelectorAll("ul li")
// 当前显示的表单页面索引
let page = 0

// 点击下一页的按钮
$(".next").click(function () {
  // 隐藏当前表单页面
  forms[page].style.display="none"
  // 显示下一个表单页面
  forms[page + 1].style.display="block"
  // 将步骤条中对应的步骤标记为活动状态
  lists[page + 1].classList.add("active")
  // 更新当前页面索引
  page++
});

// 点击返回按钮
$(".previous").click(function () {
  // 隐藏当前表单页面
  forms[page].style.display="none"
  // 显示上一个表单页面
  forms[page - 1].style.display="block"
  // 将步骤条中对应的步骤取消活动状态
  lists[page].classList.remove("active")
  // 更新当前页面索引
  page--
});

// 点击提交按钮
$(".submit").click(function () {
  // 此处可添加表单提交的逻辑
});

代码解析📑

一、HTML 部分

<!DOCTYPE html>
<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="container">
      <form id="allform">
        <!-- 步骤条 -->
        <ul id="progressbar">
          <li class="active">个人信息</li>
          <li>描述</li>
          <li>账户设置</li>
        </ul>
        <!-- 第一个表单域 -->
        <fieldset id="form1">
          <h2 class="form-title">个人信息</h2>
          <input type="text" name="name" placeholder="姓名" />
          <input type="text" name="gender" placeholder="性别" />
          <input
            type="button"
            name="next"
            class="next action-button"
            id="next-1"
            value="下一页"
          />
        </fieldset>
        <!--第二个表单域-->
        <fieldset id="form2">
          <h2 class="form-title">联系方式</h2>
          <input type="text" name="tel" placeholder="电话" />
          <input type="text" name="email" placeholder="邮箱" />
          <input
            type="button"
            name="previous"
            class="previous action-button-previous"
            id="back-1"
            value="返回"
          />
          <input
            type="button"
            name="next"
            class="next action-button"
            id="next-2"
            value="下一页"
          />
        </fieldset>
        <!--第三个表单域-->
        <fieldset id="form3">
          <h2 class="form-title">创建账户</h2>
          <input type="password" name="pass" placeholder="密码" />
          <input type="password" name="cpass" placeholder="再次输入密码" />
          <input
            type="button"
            name="previous"
            class="previous action-button-previous"
            id="back-2"
            value="返回"
          />
          <input
            type="submit"
            name="submit"
            class="submit action-button"
            value="提交"
          />
        </fieldset>
      </form>
    </div>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>

变量定义：
- forms：存储所有的 fieldset 元素，用于控制表单页面的显示和隐藏。
- lists：存储步骤条中的所有 li 元素，用于更新步骤条的状态。
- page：记录当前显示的表单页面索引，初始值为 0。
事件监听：
- .next 按钮点击事件：隐藏当前表单页面，显示下一个表单页面，更新步骤条状态，增加 page 值。
- .previous 按钮点击事件：隐藏当前表单页面，显示上一个表单页面，更新步骤条状态，减少 page 值。
- .submit 按钮点击事件：可在此处添加表单提交的逻辑。

二、JavaScript 部分

// 获取所有的 fieldset 元素
let forms = document.querySelectorAll("fieldset")
// 获取步骤条中的所有 li 元素
let lists = document.querySelectorAll("ul li")
// 当前显示的表单页面索引
let page = 0

// 点击下一页的按钮
$(".next").click(function () {
  // 隐藏当前表单页面
  forms[page].style.display="none"
  // 显示下一个表单页面
  forms[page + 1].style.display="block"
  // 将步骤条中对应的步骤标记为活动状态
  lists[page + 1].classList.add("active")
  // 更新当前页面索引
  page++
});

// 点击返回按钮
$(".previous").click(function () {
  // 隐藏当前表单页面
  forms[page].style.display="none"
  // 显示上一个表单页面
  forms[page - 1].style.display="block"
  // 将步骤条中对应的步骤取消活动状态
  lists[page].classList.remove("active")
  // 更新当前页面索引
  page--
});

// 点击提交按钮
$(".submit").click(function () {
  // 此处可添加表单提交的逻辑
});

变量定义：
- forms：存储所有的 fieldset 元素，用于控制表单页面的显示和隐藏。
- lists：存储步骤条中的所有 li 元素，用于更新步骤条的状态。
- page：记录当前显示的表单页面索引，初始值为 0。
事件监听：
- .next 按钮点击事件：隐藏当前表单页面，显示下一个表单页面，更新步骤条状态，增加 page 值。
- .previous 按钮点击事件：隐藏当前表单页面，显示上一个表单页面，更新步骤条状态，减少 page 值。
- .submit 按钮点击事件：可在此处添加表单提交的逻辑。

三、CSS 部分

* {
  margin: 0;
  padding: 0;
}

/*表单样式*/
#allform {
  position: relative;
  text-align: center;
  margin-top: 5%;
}

#allform fieldset {
  position: relative;
  width: 50%;
  background: rgb(158, 200, 248);
  border: 1px solid lightblue;
  border-radius: 5px;
  padding: 20px 30px;
  margin: 0 auto;
}

/*隐藏 fieldset 元素区域*/
#allform fieldset:not(:first-of-type) {
  display: none;
}

/*输入框的样式*/
#allform input {
  padding: 15px;
  border: 1px solid #5bbbe7;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  color: black;
  font-size: 17px;
}

/*按钮样式*/
#allform .action-button {
  width: 100px;
  background: #25a6da;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 25px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
}

#allform .action-button-previous {
  width: 100px;
  background: #d9d7f1;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 25px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
}

/*表单标题样式*/
.form-title {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.74);
  margin-bottom: 10px;
}

/*步骤条样式*/
#progressbar {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  counter-reset: step;
  width: 80%;
}

#progressbar li {
  list-style-type: none;
  float: left;
  color: rgba(31, 8, 8, 0.507);
  font-size: 10px;
  width: 33.33%;
  position: relative;
  letter-spacing: 1px;
}

#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 24px;
  height: 24px;
  display: block;
  font-size: 15px;
  color: black;
  border-radius: 25px;
  margin: 0 auto 10px auto;
  background: rgba(67, 87, 90, 0.186);
}

#progressbar li:after {
  position: absolute;
  content: "";
  width: 88%;
  height: 2px;
  background: rgba(19, 18, 18, 0.652);
  left: -44%;
  top: 9px;
}

#progressbar li:first-child:after {
  content: none;
}

#progressbar li.active:before,
#progressbar li.active:after {
  background: #5bbbe7;
  color: white;
}

全局样式：
- *：将所有元素的外边距和内边距设置为 0。
表单样式：
- #allform：设置表单的整体样式，包括居中显示和顶部外边距。
- #allform fieldset：设置每个表单部分的样式，包括背景颜色、边框和内边距。
- #allform fieldset:not(:first-of-type)：隐藏除第一个表单部分之外的所有表单部分。
输入框样式：
- #allform input：设置输入框的样式，包括内边距、边框和字体大小。
按钮样式：
- #allform .action-button 和 #allform .action-button-previous：设置 “下一页” 和 “返回” 按钮的样式，包括背景颜色、字体颜色和边框样式。
表单标题样式：
- .form-title：设置表单标题的样式，包括字体大小和颜色。
步骤条样式：
- #progressbar：设置步骤条的整体样式，包括宽度和计数器重置。
- #progressbar li：设置步骤条中每个步骤的样式，包括浮动和字体颜色。
- #progressbar li:before 和 #progressbar li:after：使用伪元素创建步骤条的数字和连接线。
- #progressbar li.active:before 和 #progressbar li.active:after：设置活动步骤的样式，包括背景颜色和字体颜色。