原生JavaScript实战：从零打造数字直觉测试互动页面

在社交平台和朋友圈里，经常能看到这类互动：页面给出 1 到 9 九个数字，提示“凭直觉选择一组数字，预测你未来的伴侣是个怎样的人，他的事业怎么样，我和他在一起会不会幸福”，用户点选后立刻弹出一段听起来很贴合心意的解读。很多人好奇这类页面是怎么做出来的。从技术角度看，它并不神秘：一个原生 HTML 页面、一段随机文案池和几个点击事件就能完成。真正值得写的，是交互设计、随机结果生成、状态切换、重复触发防护和移动端适配这套前端开发基本功。

这篇文章从零实现一个可本地运行、可部署到静态站点的“数字直觉测试”趣味页面。你可以学到：如何用原生 HTML/CSS/JavaScript 搭建设计页面，如何设计结果文案池，如何用随机索引生成差异结果，如何做点击状态管理和防重复点击，以及部署前后常见的排查方式。文章最后会说明这类趣味测试的娱乐本质和内容边界，让页面既能吸引用户互动，又不至于产生误导。

1. 先拆解这个数字测试页面的需求和技术点

1.1 用户交互流程是什么

这类页面看似简单，但完整交互链路比单张网页要长一点。一个标准流程是：

1. 用户进入页面后，看到一句引导语和一组数字按钮。
2. 用户凭直觉点击某个数字。
3. 页面给出三块结果：伴侣性格、事业状况、幸福指数。
4. 用户可以选择重新选，也可以让页面保持当前结果。

这里有一个容易被忽略的细节：用户点完数字后，如果继续点击其他数字，应该如何处理。很多初版页面会出现“点一个数字出一个结果，再点另一个数字又出一个结果”的行为，页面不断跳动，体验很差。更稳妥的做法是：选择数字后锁定选择区，用户看到完整结果；如果想换数字，必须先点击“重新选择”按钮，解锁后再选。这个“锁定-解锁”状态设计，是整篇文章在交互层面最重要的一条主线。

1.2 核心功能拆解

从功能模块看，页面可以拆成五部分：

这五部分不需要任何框架，原生 JavaScript 完全够用。使用原生技术的好处是：文件少、加载快、部署简单，适合快速验证一个互动页面的想法。只有当内容池变得很大、需要实时从后端获取文案、或者要接入用户账号体系时，才值得引入工程化的前端框架。

1.3 目录结构和文件组织

为了让页面能在任意静态服务器上直接运行，建议保持最简单的目录结构：

text复制digit-test/
├── index.html
├── style.css
└── script.js

三个文件分别负责结构、样式和逻辑。本地开发时直接双击 index.html 也能打开，但使用本地静态服务器效果更接近线上环境。如果后续要部署到 Nginx、OSS 或对象存储的静态站点，只需要上传这三个文件，不需要构建步骤。

2. 搭建页面骨架：HTML 结构设计

2.1 页面区域划分

HTML 是所有交互的基础。页面布局按从上到下的顺序拆成四个区域：

1. 头部说明区：标题和引导语。
2. 数字选择区：九宫格按钮。
3. 结果展示区：默认隐藏，选择数字后显示。
4. 脚注说明区：标注“娱乐用途”。

下面是一个最小可用的 index.html 示例：

html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数字直觉测试</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="page">
    <header class="hero">
      <h1>数字直觉测试</h1>
      <p class="subtitle">凭直觉选择一组数字，查看属于你的趣味解读</p>
    </header>

    <section class="pick-area" aria-label="选择数字">
      <div id="digitGrid" class="digit-grid"></div>
    </section>

    <button id="resetBtn" class="reset-btn" hidden>重新选择</button>

    <section id="resultCard" class="result-card" hidden aria-live="polite"></section>

    <footer class="notice">
      本页面为娱乐互动，结果由随机文案池生成，不具备预测意义。
    </footer>
  </main>

  <script src="script.js"></script>
</body>
</html>

这个结构中，有四个属性值得注意：

• hidden：原生 HTML 属性，控制元素初始隐藏。浏览器默认会给 hidden 元素设置 display: none，不需要额外写样式。
• aria-label：给屏幕阅读器提供语义说明。
• aria-live="polite"：当结果区域内容变化时，屏幕阅读器会温和地播报更新内容，而不是打断用户操作。
• id：digitGrid、resetBtn、resultCard 这三个 id 是 JS 操作的锚点，命名要统一，避免后面写脚本时反复对照。

2.2 为什么让 JS 渲染数字按钮而不是写死九个 button

有人会直接把 9 个按钮写在 HTML 里，这样也能运行。但数字数量、按钮文案一旦变化，就要同时改 HTML 和 JS，改完还可能漏绑定事件。用 JS 循环渲染的好处是：数据和视图分离。只要维护一个 count 或配置对象，按钮数量和绑定逻辑自动同步。

在 script.js 里先定义一个配置项：

javascript复制const CONFIG = {
  startNumber: 1,
  endNumber: 9
};

后续如果要改成 1 到 12，只需要调整 endNumber，不需要改 HTML。这是工程上“配置驱动渲染”的最小样例。

3. 样式与视觉反馈：让“凭直觉”的交互更自然

3.1 九宫格布局

数字按钮适合使用 CSS Grid 布局。每行三个按钮，九宫格正好三行，视觉稳定，手指点击面积也足够大。

css复制* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(180deg, #f8f9ff 0%, #eef1ff 100%);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.page {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 20px 40px;
}

.hero {
  text-align: center;
  margin-bottom: 28px;
}

.hero h1 {
  font-size: 28px;
  margin: 0 0 8px;
  color: #2f3542;
}

.subtitle {
  color: #57606f;
  font-size: 15px;
}

.digit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 360px;
  margin: 0 auto;
}

grid-template-columns: repeat(3, 1fr) 表示每行三等分。gap: 14px 控制按钮间距。在手机屏幕上，按钮宽度大约在 100 到 110 像素之间，配合 height: 72px，点击区域够大，不太容易误触相邻按钮。

3.2 数字按钮的悬停和按压状态

视觉反馈是这类页面体验的关键。用户点击数字时，如果没有任何状态变化，会怀疑页面是不是坏了。通常要同时做三种状态：

• 默认态：白色背景、灰色边框。
• 悬停态：轻微上浮、边框变色。
• 选中态：背景填充、文字反白。

css复制.digit-btn {
  height: 72px;
  border: 2px solid #e0e5f2;
  border-radius: 16px;
  background: #ffffff;
  font-size: 24px;
  font-weight: 600;
  color: #2f3542;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.digit-btn:hover {
  transform: translateY(-2px);
  border-color: #6b7aff;
}

.digit-btn:active {
  transform: scale(0.96);
}

.digit-btn.active {
  background: #6b7aff;
  color: #ffffff;
  border-color: #6b7aff;
}

这里要注意 transition 的作用。transform、border-color、background 三者的变化如果瞬间完成，用户的视觉会非常生硬；加上 0.15s ease 后，反馈柔和一些。但不要过渡时间太长，否则会显得拖沓。

3.3 结果卡片的显示动画

结果卡片从隐藏切换到可见时，最好有一点渐入效果。原生 CSS 可以直接用动画：

css复制.result-card {
  margin-top: 24px;
  padding: 20px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(60, 60, 100, 0.12);
}

.result-card.show {
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

注意，hidden 属性控制的元素不能直接应用动画，因为 display: none 的元素不会触发过渡或动画。实际做法是：JS 先移除 hidden 属性，再添加 show 类名。下面会讲到具体代码。

3.4 移动端注意事项

手机上点击按钮经常出现 300 毫秒延迟，还会在触摸结束时触发一次悬停效果闪烁。可以在 CSS 里加一行 touch-action: manipulation，告诉浏览器这个区域不允许双击缩放，减少延迟：

css复制.digit-btn,
.reset-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

-webkit-tap-highlight-color: transparent 可以去掉部分 Android 浏览器点击时的灰色高亮，视觉更干净。

4. JavaScript 实现：选数字、随机结果和状态管理

4.1 结果池数据结构设计

结果内容是整个页面的核心。数据结构决定了后续扩展是否方便。推荐把结果按维度拆成三个数组：伴侣性格、事业状况、幸福指数。

javascript复制const RESULT_POOL = {
  partner: [
    "做事靠谱，遇到问题会先想解决办法，不太擅长空谈",
    "性格偏冷静，熟了之后话会变多，喜欢行动胜于承诺",
    "会照顾人，但在表达亲密感受时比较含蓄",
    "好奇心强，愿意陪你尝试新鲜事物，偶尔有点三分钟热度"
  ],
  career: [
    "事业节奏偏稳，适合走技术深耕或专业积累型路线",
    "有冲劲，但需要学会控制节奏，避免在机会面前冲动决策",
    "适合协作型工作，身边团队氛围对他的状态影响很大",
    "未来几年可能出现新的行业机会，值得提前储备能力"
  ],
  happiness: [
    "幸福感更多来自日常的小默契，而不是轰轰烈烈的仪式",
    "相处时需要双方主动沟通，才能避免误会累积",
    "只要保持平等和信任，这段关系会带来稳定的安全感",
    "适合把彼此的时间安排和目标慢慢对齐，共同成长"
  ]
};

每个数组最少放三到四条内容。文案风格要中性、克制，不要写“他一定很有钱”“你一定会被宠坏”这类绝对化表达。原因是这类页面是娱乐性质，文案写得越绝对，用户越容易产生不切实际的期待，也越容易被截图传播成争议内容。

4.2 随机结果生成：两种常见实现方式

方式一是完全随机抽取，和用户选中的数字没有映射关系。

javascript复制function pickRandom(arr) {
  const randomIndex = Math.floor(Math.random() * arr.length);
  return arr[randomIndex];
}

方式二是让数字参与结果生成，不同数字组合出不同结果。这样页面会更像“有逻辑”。

javascript复制function generateAnswer(digit) {
  const offset = digit * 3 % 7;
  const partnerIndex = (digit + offset) % RESULT_POOL.partner.length;
  const careerIndex = (digit + 1 + offset) % RESULT_POOL.career.length;
  const happinessIndex = (digit + 2 + offset) % RESULT_POOL.happiness.length;

  return {
    partner: RESULT_POOL.partner[partnerIndex],
    career: RESULT_POOL.career[careerIndex],
    happiness: RESULT_POOL.happiness[happinessIndex]
  };
}

方式二需要注意的是：digit + offset 可能很大，但取模运算后始终落在数组长度范围内。不能直接拿 digit 作为数组下标，因为数字可能大于数组长度，会越界变成 undefined。

注意：方案里不管怎么取模，本质都是在文案池中选组合，并不具备真实预测意义。开发时应该把这一点写在页面说明里，而不是让用户误以为数字和命运之间有科学关联。

4.3 状态管理：锁定、重置和防重复触发

用一个简单的状态对象管理页面整体交互：

javascript复制const state = {
  locked: false,
  selectedDigit: null
};

locked 表示当前是否已经选择完毕。点击数字后，如果 locked 为 true，直接忽略后续点击。这样可以避免用户连续点击两个数字，导致结果互相覆盖。

完整脚本如下：

javascript复制const CONFIG = {
  startNumber: 1,
  endNumber: 9
};

const RESULT_POOL = {
  partner: [
    "做事靠谱，遇到问题会先想解决办法，不太擅长空谈",
    "性格偏冷静，熟了之后话会变多，喜欢行动胜于承诺",
    "会照顾人，但在表达亲密感受时比较含蓄",
    "好奇心强，愿意陪你尝试新鲜事物，偶尔有点三分钟热度"
  ],
  career: [
    "事业节奏偏稳，适合走技术深耕或专业积累型路线",
    "有冲劲，但需要学会控制节奏，避免在机会面前冲动决策",
    "适合协作型工作，身边团队氛围对他的状态影响很大",
    "未来几年可能出现新的行业机会，值得提前储备能力"
  ],
  happiness: [
    "幸福感更多来自日常的小默契，而不是轰轰烈烈的仪式",
    "相处时需要双方主动沟通，才能避免误会累积",
    "只要保持平等和信任，这段关系会带来稳定的安全感",
    "适合把彼此的时间安排和目标慢慢对齐，共同成长"
  ]
};

const state = {
  locked: false,
  selectedDigit: null
};

function init() {
  renderDigits();
  bindReset();
}

function renderDigits() {
  const grid = document.getElementById("digitGrid");
  grid.innerHTML = "";

  for (let i = CONFIG.startNumber; i <= CONFIG.endNumber; i++) {
    const btn = document.createElement("button");
    btn.type = "button";
    btn.className = "digit-btn";
    btn.dataset.idx = String(i);
    btn.textContent = String(i);
    btn.addEventListener("click", () => handlePick(i));
    grid.appendChild(btn);
  }
}

function handlePick(digit) {
  if (state.locked) {
    return;
  }

  state.locked = true;
  state.selectedDigit = digit;

  const activeBtn = document.querySelector(`.digit-btn[data-idx="${digit}"]`);
  if (activeBtn) {
    activeBtn.classList.add("active");
  }

  const answer = generateAnswer(digit);
  renderResult(answer);

  const resetBtn = document.getElementById("resetBtn");
  resetBtn.hidden = false;
}

function generateAnswer(digit) {
  const offset = digit * 3 % 7;
  const partnerIndex = (digit + offset) % RESULT_POOL.partner.length;
  const careerIndex = (digit + 1 + offset) % RESULT_POOL.career.length;
  const happinessIndex = (digit + 2 + offset) % RESULT_POOL.happiness.length;

  return {
    partner: RESULT_POOL.partner[partnerIndex],
    career: RESULT_POOL.career[careerIndex],
    happiness: RESULT_POOL.happiness[happinessIndex]
  };
}

function renderResult(answer) {
  const card = document.getElementById("resultCard");

  card.innerHTML = `
    <h2>你选中的数字是 ${state.selectedDigit}</h2>
    <div class="result-item">
      <span class="label">伴侣特质</span>
      <p>${answer.partner}</p>
    </div>
    <div class="result-item">
      <span class="label">事业状况</span>
      <p>${answer.career}</p>
    </div>
    <div class="result-item">
      <span class="label">幸福指数</span>
      <p>${answer.happiness}</p>
    </div>
  `;

  card.hidden = false;
  card.classList.add("show");
}

function bindReset() {
  const resetBtn = document.getElementById("resetBtn");
  resetBtn.addEventListener("click", handleReset);
}

function handleReset() {
  state.locked = false;
  state.selectedDigit = null;

  document.querySelectorAll(".digit-btn").forEach((btn) => {
    btn.classList.remove("active");
  });

  const card = document.getElementById("resultCard");
  card.hidden = true;
  card.innerHTML = "";
  card.classList.remove("show");

  const resetBtn = document.getElementById("resetBtn");
  resetBtn.hidden = true;
}

document.addEventListener("DOMContentLoaded", init);

这段代码有几个关键点：

1. 事件绑定用的是 addEventListener，没有在 HTML 里写 onclick 属性。这样逻辑更集中，也方便后面移除或扩展。
2. dataset.idx 用于标记按钮对应的数字，查询选中按钮时使用 document.querySelector 配合属性选择器，比遍历所有按钮更直接。
3. handleReset 里同时重置了 state、按钮类名、结果卡片 HTML 和“重新选择”按钮的显隐状态。漏掉任何一个，都会出现状态残留。

4.4 为什么不用框架

对于这个规模的项目，引入 Vue、React 或者其他框架是过度设计。框架的核心价值在于管理复杂状态和组件复用，而这个页面只有两个状态：是否锁定、选中了哪个数字。原生代码写起来更短，也没有构建依赖。更重要的是，三个静态文件在任何地方都能部署，不依赖 Node 环境。等页面成长到需要用户账号、后端互动、实时文案更新时，再迁移到框架不迟。

5. 运行验证与调试

5.1 本地运行方式

运行方式有两种。

方式一：直接双击 index.html，用浏览器打开。这种方式最简单，适合快速看效果。但要注意：双击打开时页面协议是 file://，不会触发浏览器跨域限制，脚本能正常加载。

方式二：使用本地静态服务器。如果你在用 VS Code，安装 Live Server 插件后，右键 index.html 选择 “Open with Live Server”，会得到一个 http://127.0.0.1:5500/index.html 地址。本地服务器更接近线上部署环境，也方便后续联调接口。

推荐用方式二，因为后续如果接入后端接口，file:// 协议会遇到跨域问题，早一点切换到本地服务器可以少踩坑。

5.2 预期行为验证清单

页面跑起来后，不要只验证“能打开”，要按交互流程过一遍。

5.3 在控制台验证核心函数

开发者可以直接在浏览器控制台里调用内部函数，验证结果生成是否正确。打开控制台输入：

javascript复制generateAnswer(3);

如果看到返回的是一个包含 partner、career、happiness 字段的对象，说明逻辑正常。如果出现 undefined，先检查数组字段名是否一致，很常见的情况是后面把 partner 改成了 partnerText，但 generateAnswer 里还在读 partner。

6. 常见坑与排查路径

这类页面代码量不大，但状态管理、DOM 操作和 CSS 显示机制之间容易互相干扰。下面几个问题在实践中出现频率很高。

6.1 点击数字后结果卡片不显示

现象是按钮点击有反馈，但页面下方没有出现结果。

排查顺序：

1. 打开控制台看有没有 JS 报错。常见错误是 Cannot read properties of null，说明 document.getElementById("resultCard") 没有拿到节点。
2. 检查 id 是否一致。HTML 里写的是 resultCard，JS 里写成了 result-card，会直接找不到元素。
3. 检查是否被 hidden 属性卡住。即使设置了 card.hidden = false，如果 CSS 里又写了 #resultCard { display: none; }，并且代码没有覆盖它，元素仍然不会显示。

推荐只保留一种隐藏方式。要么只用 HTML 的 hidden 属性，要么只用 display: none 类，不要混用。如果必须混用，JS 里要同时修改 hidden 和类名。

6.2 第一次点击正常，第二次点击没反应

现象是重新选择后，再次点击数字，页面不动。

原因通常出在 state.locked。如果 handleReset 里没有把 state.locked 改回 false，点击逻辑会一直认为“已经锁定”，直接 return。

排查方式：在 handlePick 第一行加日志：

javascript复制console.log("locked:", state.locked);

如果第二次点击时 locked 仍是 true，说明重置逻辑没有执行，或者“重新选择”按钮事件没有被绑定。

6.3 随机结果偶尔出现 undefined

现象是结果卡片三行里有一行是空的，控制台没有明显报错。

常见原因是数组越界。例如 RESULT_POOL.partner 只有 4 条，但计算公式写成了 digit % 5，数字 5 会落到下标 5 上，返回 undefined。

修复方式是所有索引都通过 % RESULT_POOL.xxx.length 取余，并设置保护：

javascript复制function getSafeText(arr, index) {
  if (!Array.isArray(arr) || arr.length === 0) {
    return "文案池为空，请联系管理员补充内容";
  }
  return arr[index % arr.length];
}

这样即使文案池内容被清空，页面也不会直接崩溃，而是显示一条可读的提示。

6.4 重复快速点击造成结果抖动

现象是用户快速连点两个数字，结果卡片在两个结果之间闪烁，最后停在第二次点击的结果上。

原因是没有锁定机制，或者锁定后没有在重置时解锁。本项目的 state.locked 正是为了解决这个问题：只要第一次点击成功，locked 立即变为 true，后续点击不会执行。如果你的实现里把 locked = true 写在 generateAnswer 之后，而生成函数本身比较耗时，仍可能被第二次点击抢在代码执行完之前进入。更安全的写法是把 locked = true 放在 handlePick 的最前面，也就是上面示例代码中的位置。

6.5 部署到服务器后样式丢失

现象是本地打开正常，上传到 Nginx 或对象存储后页面没有样式，按钮也没有布局。

排查顺序：

1. 看浏览器 Network 面板，style.css 和 script.js 是否返回 404。
2. 检查引用路径。href="style.css" 是相对路径，要求 CSS 文件和 HTML 文件在同一目录下。如果页面部署到 /tools/digit-test/ 子目录，相对路径仍然有效；但如果用了 /style.css 这种根路径写法，部署在子目录时就会失效。
3. 确认服务器是否按要求配置了静态文件 MIME 类型。极少数默认服务器会把 .css 文件当作文本输出，导致浏览器拒绝应用样式。

7. 可复用清单：发布前检查项

这类趣味页面通常生命周期短、上线快，但越简单越容易漏检查。下面这份清单可以直接复制到自己的项目里，作为发布前确认项。

8. 扩展方向：从静态页变成可运营的互动页面

8.1 接入后端统计点击偏好

如果希望了解用户更喜欢点哪些数字，可以在 handlePick 里调用统计接口。注意，统计只需要传数字和页面标识，不需要传用户身份信息。

javascript复制async function reportPick(digit) {
  try {
    await fetch("/api/report", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        page: "digit-test",
        digit
      })
    });
  } catch (error) {
    console.warn("report failed", error);
  }
}

这里两个设计点：用 try/catch 包裹上报逻辑，上报失败不能影响主流程；上报是异步的，使用 async/await 但不在主流程中阻塞结果展示。

8.2 生成分享海报

常见玩法是用户看到结果后，把结果生成一张卡片分享出去。这一步可以用 Canvas 实现。思路是绘制背景、标题、结果文案和声明文字，然后调用 canvas.toDataURL("image/png") 得到图片地址，让用户长按保存。

注意，Canvas 上的文字换行需要自己计算画布宽度，不能直接依赖 CSS。实现时可以先按固定宽度切字符串，逐行绘制。如果用户隐私要求高，不要在分享图里带任何用户输入信息。

8.3 内容池配置化

当文案越来越多，直接维护 script.js 里的对象会变得困难。可以把文案拆到独立 JSON 文件里，或者由后端接口返回：

javascript复制async function loadResultPool() {
  const response = await fetch("/api/result-pool");
  const data = await response.json();
  return data;
}

这样运营人员可以独立更新文案，不需要修改前端逻辑。落入线后还要给接口增加缓存策略，比如 Cache-Control 设置 s-maxage=600，避免每次点击都请求接口。

8.4 埋点和隐私注意点

埋点方案要遵循一个基本原则：只采集完成互动所必需的数据。建议采集的内容只有“页面访问次数”和“各数字点击占比”，不采集用户身份信息。如果页面未来加入“用户输入姓名再测”的玩法，务必在页面显著位置说明数据用途，并设置独立的信息收集入口，不能悄悄埋点。

9. 技术之外的提醒：直觉测试的娱乐本质

这类页面会让人产生“测得很准”的错觉。从心理学角度看，原因主要有两个：一是巴纳姆效应，人很容易接受那些泛化、通用的人格描述，并认为它专门针对自己；二是确认偏差，用户会主动回想那些符合描述的经历，忽视不符合的部分。作为开发者，最重要的职业习惯不是在代码里加强预言效果，而是在产品层面保持克制。

页面提供结果文案时，开头就用“这种类型的人可能更倾向于……”或“相处中比较容易出现……”这类非绝对化句式。页脚明确写“结果由随机文案池生成，仅供娱乐”。这样做既不影响互动乐趣，也能避免用户把随机内容当真。尤其当内容涉及伴侣、事业、幸福感等人生决策主题时，内容边界比流量更值得优先考虑。

这类趣味测试页面的技术门槛不高，但把交互细节、随机逻辑、状态重置和内容边界都做到位，仍然需要完整走一遍“设计-开发-验证-部署”的流程。它很适合作为前端新手的一个完整练习项目：项目里几乎没有外部依赖，却能启动得了 DOM 操作、事件绑定、随机算法、状态管理和响应式布局，改造成本低，也能直接部署到任意静态托管平台。做完这个页面后，再往里面加接口、加分享图、加数据统计，就是一条合理的前端进阶路径。