【Html.js——功能实现】收集帛书碎片（蓝桥杯真题-5135）【合集】

Rossy Yan

发布于 2025-02-17 15:17:53

3900

代码可运行

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

运行总次数：0

代码可运行

背景介绍

三叔在外出考古途中无意发现了一份战国帛书，帛书边缘有被明显裁剪过的痕迹，单从帛书片段，提到记录了神秘文物的地点，无奈帛书不完整，为了早日将文物带回博物馆，三叔号召当地村民闷油瓶、王胖子、潘子共同寻找剩余帛书碎片，相约一炷香后再聚。本题需要在已提供的基础项目中使用 JS 知识封装一个函数，达到收集帛书碎片的要求。

准备步骤

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

├── js
│   └── collect-puzzle.js
├── css
│   └── style.css
├── images
└── index.html

其中：

index.html 是主页面。
css/style.css 是样式文件。
images 是图片文件夹。
js/collect-puzzle.js 是需要补充代码的 js 文件。

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

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

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

目标效果

请在 collect-puzzle.js 文件中补全函数 collectPuzzle 中的代码，返回包含不同帛书碎片的数组，最终拼出完整的战国帛书，需要注意：

同一个人收集的帛书碎片可能是有重复的。
同一组内不同的人收集的帛书碎片也可能是有重复的。
工具函数需要统计所有人获取的不同帛书碎片，而不是帛书碎片数量。

例如：

var arr1 = ["灾变", "四时运转", "天象"];
var arr2 = ["四时运转"];

var result1 = collectPuzzle(arr1, arr2);
console.log(result1); // 输出：["灾变","四时运转","天象"]

// 同一组内的拼图不能重复计算
var arr3 = ["灾变", "灾变", "天象"];
var arr4 = ["灾变", "月令禁忌", "天象"];

var result2 = collectPuzzle(arr3, arr4);
console.log(result2); // 输出：["灾变", "天象","月令禁忌"]

上述仅为示例代码，判题时会随机提供数组对该函数功能进行检测。

在题目所提供的数据的情况下，完成后的效果如下：

要求规定

请勿修改 collect-puzzle.js 文件外的任何内容。
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。

判分标准

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

通关代码✔️

function collectPuzzle(...puzzles) {
  // 定义一个空数组，用于存储所有不同的帛书碎片
  let uniquePuzzles = [];

  // 遍历传入的所有拼图数组
  for (let puzzleArray of puzzles) {
      // 遍历当前拼图数组中的每个碎片
      for (let puzzle of puzzleArray) {
          // 检查该碎片是否已经存在于 uniquePuzzles 数组中
          if (!uniquePuzzles.includes(puzzle)) {
              // 如果不存在，则将其添加到 uniquePuzzles 数组中
              uniquePuzzles.push(puzzle);
          }
      }
  }

  // 返回包含所有不同帛书碎片的数组
  return uniquePuzzles;
}

// 检测需要，请勿删除
module.exports = collectPuzzle;

代码解析📑

一、HTML 部分

<!DOCTYPE html>
<html lang="zh-CN">
  <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="grid">
      <div class="card"><img src="images/01.jpg" /></div>
      <div class="card"><img src="images/02.jpg" /></div>
      <div class="card"><img src="images/03.jpg" /></div>
      <div class="card"><img src="images/04.jpg" /></div>
      <div class="card"><img src="images/05.jpg" /></div>
      <div class="card"></div>
      <div class="card"><img src="images/07.jpg" /></div>
      <div class="card"></div>
      <div class="card"></div>
    </div>
    <div class="message">
      <div class="tip">帛书碎片集结成功</div>
      <div class="text-item" class="text-item-right">
        <div class="chat-name">闷油瓶</div>
        <div class="chat-box" id="user1"></div>
      </div>
      <div class="text-item" class="text-item-right">
        <div class="chat-name">王胖子</div>
        <div class="chat-box" id="user2"></div>
      </div>
      <div class="text-item" class="text-item-right">
        <div class="chat-name">潘子</div>
        <div class="chat-box" id="user3"></div>
      </div>
      <div class="button" id="btnmix">点击合成</div>
      <div class="text-item" class="text-item-right">
        <div class="chat-name">结果</div>
        <div class="chat-box" id="result">等待合成</div>
      </div>
    </div>

    <script src="./js/collect-puzzle.js"></script>
    <script>
      const redPuzzles = ["四时运转", "灾变", "四时运转", "天象"];
      const bluePuzzles = ["四时运转", "月令禁忌", "天象"];
      const greenPuzzles = ["月令禁忌", "天象", "四时运转", "天象"];
      const resultPuzzles = collectPuzzle(
        redPuzzles,
        bluePuzzles,
        greenPuzzles
      );

      document.getElementById("user1").innerText += JSON.stringify(redPuzzles);
      document.getElementById("user2").innerText += JSON.stringify(bluePuzzles);
      document.getElementById("user3").innerText +=
        JSON.stringify(greenPuzzles);
      document.getElementById("btnmix").onclick = function () {
        document.getElementById("result").innerText =
          JSON.stringify(resultPuzzles);
        //当碎片集结成功时效果
        let arr = ["四时运转", "灾变", "月令禁忌", "天象"];
        if (
          resultPuzzles.length === arr.length &&
          resultPuzzles.filter((t) => !arr.includes(t))
        ) {
          document.querySelector(
            ".card:nth-child(6)"
          ).innerHTML = `<img src='images/06.jpg' />`;
          document.querySelector(
            ".card:nth-child(8)"
          ).innerHTML = `<img src='images/08.jpg' />`;
          document.querySelector(
            ".card:nth-child(9)"
          ).innerHTML = `<img src='images/09.jpg' />`;
          document.getElementsByClassName("tip")[0].style.display = "block";
        }
      };
    </script>
  </body>
</html>

1. 头部信息

<!DOCTYPE html>：声明文档为 HTML5 类型。
<html lang="zh-CN">：指定页面语言为中文（中国大陆）。
<head> 标签内包含以下内容：
- meta charset="UTF-8"：设置字符编码为 UTF - 8，确保页面能正确显示各种字符。
- meta http-equiv="X-UA-Compatible" content="IE=edge"：让页面在 Internet Explorer 中以最新的渲染模式显示。
- meta name="viewport" content="width=device-width, initial-scale=1.0"：使页面在不同设备上能自适应显示。
- <title> 标签设置页面标题为 “收集帛书碎片”。
- <link> 标签引入外部样式表 css/style.css，用于美化页面。

2. 主体内容

<div class="grid">：是一个网格布局的容器，内部包含多个 <div class="card"> 元素。部分 <div> 中通过 <img> 标签展示了已有的帛书碎片图片，部分 <div> 为空，用于后续显示补齐的碎片。
<div class="message">：是消息展示区域，包含以下部分：
- <div class="tip">：提示信息，默认显示 “帛书碎片集结成功”，但初始时可能因样式设置隐藏。
- 多个 <div class="text-item">：分别对应不同人物（闷油瓶、王胖子、潘子）的信息展示，包含人物名称 <div class="chat-name"> 和聊天框 <div class="chat-box">，聊天框有对应的 id 用于后续 JavaScript 操作。
- <div class="button" id="btnmix">：合成按钮，点击后触发合成逻辑。
- 最后一个 <div class="text-item"> 用于展示合成结果，初始显示 “等待合成”。

二、JavaScript 部分

1. collect-puzzle.js 文件中的 collectPuzzle 函数

function collectPuzzle(...puzzles) {
  let uniquePuzzles = [];
  for (let puzzleArray of puzzles) {
    for (let puzzle of puzzleArray) {
      if (!uniquePuzzles.includes(puzzle)) {
        uniquePuzzles.push(puzzle);
      }
    }
  }
  return uniquePuzzles;
}

module.exports = collectPuzzle;

参数：使用剩余参数 ...puzzles 接收任意数量的数组，这些数组代表不同人物收集的帛书碎片。
实现逻辑：
1. 初始化一个空数组 uniquePuzzles 用于存储去重后的碎片。
2. 使用嵌套的 for...of 循环遍历所有传入的数组及其元素。
3. 对于每个元素，使用 includes 方法检查其是否已经存在于 uniquePuzzles 数组中，如果不存在则添加到该数组。
4. 最后返回 uniquePuzzles 数组。
module.exports = collectPuzzle;：将 collectPuzzle 函数导出，以便在其他文件中使用（可能用于测试等目的）。

2. HTML 文件内部 <script> 标签中的代码

const redPuzzles = ["四时运转", "灾变", "四时运转", "天象"];
const bluePuzzles = ["四时运转", "月令禁忌", "天象"];
const greenPuzzles = ["月令禁忌", "天象", "四时运转", "天象"];
const resultPuzzles = collectPuzzle(
  redPuzzles,
  bluePuzzles,
  greenPuzzles
);

document.getElementById("user1").innerText += JSON.stringify(redPuzzles);
document.getElementById("user2").innerText += JSON.stringify(bluePuzzles);
document.getElementById("user3").innerText += JSON.stringify(greenPuzzles);

document.getElementById("btnmix").onclick = function () {
  document.getElementById("result").innerText = JSON.stringify(resultPuzzles);
  let arr = ["四时运转", "灾变", "月令禁忌", "天象"];
  if (
    resultPuzzles.length === arr.length &&
    resultPuzzles.filter((t) => !arr.includes(t)).length === 0
  ) {
    document.querySelector(
      ".card:nth-child(6)"
    ).innerHTML = `<img src='images/06.jpg' />`;
    document.querySelector(
      ".card:nth-child(8)"
    ).innerHTML = `<img src='images/08.jpg' />`;
    document.querySelector(
      ".card:nth-child(9)"
    ).innerHTML = `<img src='images/09.jpg' />`;
    document.getElementsByClassName("tip")[0].style.display = "block";
  }
};

变量定义与碎片收集：
- 定义三个数组 redPuzzles、bluePuzzles、greenPuzzles 分别代表不同人物收集的帛书碎片，其中存在重复碎片。
- 调用 collectPuzzle 函数对这三个数组进行处理，得到去重后的碎片数组 resultPuzzles。
信息展示：
- 使用 document.getElementById 方法获取对应的聊天框元素，并将每个人收集的碎片信息以 JSON 字符串的形式添加到聊天框中。
合成按钮点击事件：
- 为合成按钮 btnmix 添加点击事件监听器。
- 当按钮被点击时，将去重后的碎片信息 resultPuzzles 以 JSON 字符串的形式显示在结果框中。
- 定义目标碎片数组 arr，检查 resultPuzzles 是否包含了所有目标碎片，判断条件为 resultPuzzles 的长度与 arr 相同，且 resultPuzzles 中不存在 arr 不包含的元素。
- 如果条件满足，通过 document.querySelector 方法找到对应的 <div class="card"> 元素，将缺失的碎片图片插入其中，并将提示信息的显示样式设置为 block，使其可见。

三、工作流程▶️

页面加载阶段
- 浏览器解析 HTML 文件，加载外部样式表 css/style.css 对页面进行美化。
- 引入 js/collect-puzzle.js 文件，获取其中的 collectPuzzle 函数。
- 执行 HTML 文件内部 <script> 标签中的代码，定义不同人物收集的碎片数组，并调用 collectPuzzle 函数进行去重处理，得到去重后的碎片数组 resultPuzzles。
- 将每个人收集的碎片信息显示在对应的聊天框中，结果框显示 “等待合成”。
用户交互阶段
- 用户点击 “点击合成” 按钮，触发点击事件监听器。
- 系统将去重后的碎片信息显示在结果框中。
- 检查是否集齐所有目标碎片，如果集齐：
  - 在页面上的对应位置显示缺失的碎片图片。
  - 显示 “帛书碎片集结成功” 的提示信息。