前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
腾讯云架构师技术同盟
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP腾讯云架构师技术同盟
返回腾讯云官网
社区首页 >专栏 >【Html.js——功能实现】宝贵的一票（蓝桥杯真题-2323）【合集】

【Html.js——功能实现】宝贵的一票（蓝桥杯真题-2323）【合集】

作者头像
Rossy Yan
发布于 2025-02-02 22:18:51
发布于 2025-02-02 22:18:51
3700
代码可运行
举报
文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台
运行总次数：0
代码可运行

背景介绍

公司经常举办各种活动，但一到投票环节就犯了难，于是公司决定安排小蓝开发一个投票系统，更好的收集大家的投票信息。为了赶在下一次活动开始前上线，小蓝正在马不停蹄的赶工中，请你也来帮助小蓝完成部分功能吧。

准备步骤

本题已经内置了初始代码，打开实验环境，目录结构如下：

代码语言：javascript
代码运行次数：0
复制
├── css
├── images
├── js
│   └── jquery.min.js
└── index.html

其中：

  • index.html 是主页面。
  • images 是存放图片的文件夹。
  • css 是存放样式文件的文件夹。
  • js/jquery.min.js 是 jQuery 文件。

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

目标效果

完成 index.html 文件中的 TODO 部分。

1. 点击添加选项，页面中新增一个选项。选项前文字按照：选项 1，选项 2，选项 3 ...... 顺序排列，当页面中的选项大于 2 个时，选项后面跟随删除按钮（即 x 图标）。带有删除图标的选项 DOM 结构如下：

代码语言：javascript
代码运行次数：0
复制
<div class="mb-3 row item">
  <label class="col-sm-2 col-form-label txt">选项1</label>
  <div class="col-sm-9">
    <input type="text" class="form-control" />
  </div>
  <div class="col-sm-1">
    <!-- 删除图标 -->
    <img class="del-icon" src="./images/x.svg" alt="" />
  </div>
</div>

2. 点击删除按钮，删除当前选项，并且选项前文字按照：选项 1，选项 2，选项 3 ...... 顺序排列，当选项数量小于等于 2 个时，选项后面无删除按钮。

完成后，最终页面效果如下：

要求规定

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

判分标准

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

通关代码✔️

代码语言：javascript
代码运行次数：0
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>宝贵的一票</title>
  <script src="./js/jquery.min.js"></script>
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <link rel="stylesheet" href="./css/style.css" />
</head>

<body>
  <div class="inner-container shadow">
    <div class="mb-3 row">
      <label class="col-sm-2 col-form-label">投票主题</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" />
      </div>
    </div>
    <div class="list"></div>
    <div class="add">
      <div class="addtxt">
        <img src="./images/plus-square.svg" alt="加号图标" />
        添加选项
      </div>
    </div>
    <div class="form-check checkbox-one">
      <input class="form-check-input" type="checkbox" value="" />
      <label class="form-check-label" for="flexCheckDefault">
        支持多选
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" />
      <label class="form-check-label" for="flexCheckDefault">
        公开投票结果
      </label>
    </div>

    <div class="row bottom">
      <div class="col">
        <a class="historytxt" href="javascript:void(0)">历史投票</a>
      </div>
      <div class="col"></div>
      <div class="col">
        <button type="button" class="btn btn-light">取消</button>
        <button type="button" class="btn btn-primary">发起投票</button>
      </div>
    </div>
  </div>

  <script>
    // 生成选项 HTML 的函数，可根据是否显示删除按钮来生成不同结构
    let initRender = (txt, showDelete = false) => {
      if (showDelete) {
        return `<div class="mb-3 row item">
                  <label class="col-sm-2 col-form-label txt">${txt}</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" />
                  </div>
                  <div class="col-sm-1">
                    <!-- 删除图标 -->
                    <img class="del-icon" src="./images/x.svg" alt="" />
                  </div>
                </div>`;
      } else {
        return `<div class="mb-3 row">
                  <label class="col-sm-2 col-form-label txt">${txt}</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" />
                  </div>
                </div>`;
      }
    };

    $(function () {
      // 初始化渲染两个选项，且不显示删除按钮
      for (let index = 0; index < 2; index++) {
        let initList = initRender(`选项${index + 1}`);
        $(".list").append(initList);
      }

      // 点击添加选项的逻辑
      $(".add").click(function () {
        // 获取当前选项数量
        let itemCount = $(".list .row").length;
        // 新选项的序号
        let newIndex = itemCount + 1;
        // 判断是否需要显示删除按钮
        let showDelete = newIndex > 2;
        // 生成新选项的 HTML
        let newItem = initRender(`选项${newIndex}`, showDelete);
        // 将新选项添加到列表中
        $(".list").append(newItem);

        if (showDelete) {
          // 若需要显示删除按钮，为已有选项添加删除按钮
          $(".list .row").each(function (index) {
            if (!$(this).hasClass("item")) {
              let txt = $(this).find(".txt").text();
              let newHtml = initRender(txt, true);
              $(this).replaceWith(newHtml);
            }
          });
        }
      });

      // 点击删除按钮的逻辑
      $(document).on("click", ".del-icon", function () {
        // 删除当前选项
        $(this).closest(".row").remove();
        // 获取剩余选项数量
        let itemCount = $(".list .row").length;
        // 遍历剩余选项，更新序号
        $(".list .row").each(function (index) {
          let txt = `选项${index + 1}`;
          $(this).find(".txt").text(txt);
          // 若选项数量小于等于 2，移除删除按钮
          if (itemCount <= 2) {
            if ($(this).hasClass("item")) {
              let newHtml = initRender(txt, false);
              $(this).replaceWith(newHtml);
            }
          }
        });
      });
    });
  </script>
</body>

</html>

代码解析📑

一、Html 部分

代码语言：javascript
代码运行次数：0
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>宝贵的一票</title>
  <script src="./js/jquery.min.js"></script>
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <link rel="stylesheet" href="./css/style.css" />
</head>

<body>
  <div class="inner-container shadow">
    <div class="mb-3 row">
      <label class="col-sm-2 col-form-label">投票主题</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" />
      </div>
    </div>
    <div class="list"></div>
    <div class="add">
      <div class="addtxt">
        <img src="./images/plus-square.svg" alt="加号图标" />
        添加选项
      </div>
    </div>
    <div class="form-check checkbox-one">
      <input class="form-check-input" type="checkbox" value="" />
      <label class="form-check-label" for="flexCheckDefault">
        支持多选
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" />
      <label class="form-check-label" for="flexCheckDefault">
        公开投票结果
      </label>
    </div>

    <div class="row bottom">
      <div class="col">
        <a class="historytxt" href="javascript:void(0)">历史投票</a>
      </div>
      <div class="col"></div>
      <div class="col">
        <button type="button" class="btn btn-light">取消</button>
        <button type="button" class="btn btn-primary">发起投票</button>
      </div>
    </div>
  </div>
</body>

</html>

1. 文档声明与头部信息 (<!DOCTYPE html> 到 </head>)

  • <!DOCTYPE html>：声明文档类型为 HTML5。
  • <html lang="en">：定义 HTML 文档，语言为英语。
  • <head> 标签内：
    • <meta charset="UTF-8" />：设置字符编码为 UTF - 8。
    • <meta http-equiv="X-UA-Compatible" content="IE=edge" />：确保在 Internet Explorer 中以最新的渲染模式显示页面。
    • <title>宝贵的一票</title>：设置页面标题。
    • <script src="./js/jquery.min.js"></script>：引入 jQuery 库，用于后续的 JavaScript 交互。
    • <link rel="stylesheet" href="./css/bootstrap.min.css" /> 和 <link rel="stylesheet" href="./css/style.css" />：引入 Bootstrap 框架的样式文件和自定义样式文件，用于页面布局和美化。

2. 主体内容 (<body> 到 </body>)

  • <div class="inner-container shadow">：一个带有阴影效果的容器，用于包裹投票系统的主要内容。
  • 投票主题输入部分：
    • <div class="mb-3 row">：使用 Bootstrap 的栅格系统创建一行，有一定的底部外边距。
    • <label class="col-sm-2 col-form-label">投票主题</label>：一个标签，占据 2 列宽度，显示 “投票主题”。
    • <div class="col-sm-9">：一个容器，占据 9 列宽度。
    • <input type="text" class="form-control" />：一个文本输入框，用于输入投票主题。
  • <div class="list"></div>：一个空的容器，用于动态添加投票选项。
  • 添加选项按钮部分：
    • <div class="add">：一个容器，用于包裹添加选项的按钮。
    • <div class="addtxt">：一个子容器，包含图标和文本。
    • <img src="./images/plus-square.svg" alt="加号图标" />：显示一个加号图标。
    • 添加选项：显示 “添加选项” 文本。
  • 复选框部分：
    • 两个 <div class="form-check"> 分别包含一个复选框和对应的标签，用于设置 “支持多选” 和 “公开投票结果”。
  • 底部操作部分：
    • <div class="row bottom">：使用 Bootstrap 的栅格系统创建一行。
    • <div class="col">：一个列容器，包含 “历史投票” 链接。
    • <div class="col"></div>：一个空的列容器，用于布局。
    • <div class="col">：一个列容器，包含 “取消” 和 “发起投票” 按钮。

二、JavaScript 部分

代码语言：javascript
代码运行次数：0
复制
<script>
  // 生成选项 HTML 的函数，可根据是否显示删除按钮来生成不同结构
  let initRender = (txt, showDelete = false) => {
    if (showDelete) {
      return `<div class="mb-3 row item">
                <label class="col-sm-2 col-form-label txt">${txt}</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" />
                </div>
                <div class="col-sm-1">
                  <!-- 删除图标 -->
                  <img class="del-icon" src="./images/x.svg" alt="" />
                </div>
              </div>`;
    } else {
      return `<div class="mb-3 row">
                <label class="col-sm-2 col-form-label txt">${txt}</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" />
                </div>
              </div>`;
    }
  };

  $(function () {
    // 初始化渲染两个选项，且不显示删除按钮
    for (let index = 0; index < 2; index++) {
      let initList = initRender(`选项${index + 1}`);
      $(".list").append(initList);
    }

    // 点击添加选项的逻辑
    $(".add").click(function () {
      // 获取当前选项数量
      let itemCount = $(".list .row").length;
      // 新选项的序号
      let newIndex = itemCount + 1;
      // 判断是否需要显示删除按钮
      let showDelete = newIndex > 2;
      // 生成新选项的 HTML
      let newItem = initRender(`选项${newIndex}`, showDelete);
      // 将新选项添加到列表中
      $(".list").append(newItem);

      if (showDelete) {
        // 若需要显示删除按钮，为已有选项添加删除按钮
        $(".list .row").each(function (index) {
          if (!$(this).hasClass("item")) {
            let txt = $(this).find(".txt").text();
            let newHtml = initRender(txt, true);
            $(this).replaceWith(newHtml);
          }
        });
      }
    });

    // 点击删除按钮的逻辑
    $(document).on("click", ".del-icon", function () {
      // 删除当前选项
      $(this).closest(".row").remove();
      // 获取剩余选项数量
      let itemCount = $(".list .row").length;
      // 遍历剩余选项，更新序号
      $(".list .row").each(function (index) {
        let txt = `选项${index + 1}`;
        $(this).find(".txt").text(txt);
        // 若选项数量小于等于 2，移除删除按钮
        if (itemCount <= 2) {
          if ($(this).hasClass("item")) {
            let newHtml = initRender(txt, false);
            $(this).replaceWith(newHtml);
          }
        }
      });
    });
  });
</script>
  1. initRender 函数：
    • 这是一个箭头函数，用于生成投票选项的 HTML 代码。
    • 接受两个参数：txt 表示选项的文本内容，showDelete 表示是否显示删除按钮，默认值为 false。
    • 如果 showDelete 为 true，则生成带有删除图标的选项 HTML；否则，生成普通选项的 HTML。
  2. 文档就绪函数 $(function () { ... })：
    • 当文档加载完成后，执行该函数内的代码。
  3. 初始化渲染：
    • 使用 for 循环生成两个初始的投票选项，调用 initRender 函数时不传入 showDelete 参数，即不显示删除按钮。
    • 使用 $(".list").append(initList) 将生成的选项添加到 .list 容器中。
  4. 点击添加选项逻辑：
    • 给 .add 元素绑定点击事件。
    • 获取当前 .list 容器中选项的数量 itemCount。
    • 计算新选项的序号 newIndex。
    • 判断 newIndex 是否大于 2，决定是否显示删除按钮。
    • 调用 initRender 函数生成新选项的 HTML，并添加到 .list 容器中。
    • 如果需要显示删除按钮，遍历 .list 容器中的所有选项，为没有删除按钮的选项添加删除按钮。
  5. 点击删除按钮逻辑：
    • 使用事件委托，给文档绑定 .del - icon 的点击事件。
    • 当点击删除图标时，找到其最近的 .row 元素并移除。
    • 获取剩余选项的数量 itemCount。
    • 遍历剩余选项，更新选项的序号。
    • 如果剩余选项数量小于等于 2，移除选项的删除按钮。

三、工作流程 ▶️

  1. 页面加载：
    • 浏览器解析 HTML 文档，加载 jQuery 库和样式文件。
    • 执行 JavaScript 代码，调用 initRender 函数生成两个初始的投票选项，并添加到 .list 容器中。
  2. 添加选项：
    • 用户点击 “添加选项” 按钮，触发 .add 元素的点击事件。
    • 计算新选项的序号，判断是否需要显示删除按钮。
    • 生成新选项的 HTML 并添加到 .list 容器中。
    • 如果选项数量大于 2，为已有选项添加删除按钮。
  3. 删除选项：
    • 用户点击某个选项的删除图标，触发 .del - icon 的点击事件。
    • 删除当前选项。
    • 更新剩余选项的序号。
    • 如果剩余选项数量小于等于 2，移除选项的删除按钮。
  4. 其他操作：
    • 用户可以在 “投票主题” 输入框中输入投票主题。
    • 用户可以勾选 “支持多选” 和 “公开投票结果” 复选框。
    • 用户可以点击 “历史投票” 链接查看历史投票记录，点击 “取消” 按钮取消操作，点击 “发起投票” 按钮发起投票（当前代码未实现这些功能的具体逻辑）。

测试结果👍

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-01-29，如有侵权请联系 cloudcommunity@tencent.com 删除
事件
html
容器
class
函数

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

事件
html
容器
class
函数
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
目录
  • 背景介绍
  • 准备步骤
  • 目标效果
  • 要求规定
  • 判分标准
  • 通关代码✔️
  • 代码解析📑
    • 一、Html 部分
    • 二、JavaScript 部分
  • 测试结果👍
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论