做一个号码测吉凶小工具：HTML+JS 前端 Demo 实战
# 做一个号码测吉凶小工具：HTML+JS 前端 Demo 实战
> 接口/接入点：测吉凶 apiCode=1617（四个接入点） · 免费服务 · 适用人群：非技术读者、前端初学者 · 阅读时间：约 7 分钟
## 核心要点
- 一个纯前端页面即可串起四个接入点：用户选「类型」→ 前端切换参数名与 `1617-N` 路径 → 调接口渲染 `expList`。
- 无需后端，直接在浏览器打开即可运行（把 `YOUR_APPKEY` 换成你的真实 AppKey）。
- 关键坑：① `expList` 是数组逐行渲染；② 公司名可能返回空，做空态提示。
## Why：给非开发者也能用的趣味工具
不想搭服务器？一个 HTML 文件就能做一个「测吉凶」小工具，发给朋友或嵌到活动页。本篇给你可直接复制运行的完整代码。
## What：你需要准备什么
- 一个 ShowAPI 账号与 AppKey（[控制台获取](https://www.showapi.com/console#/myApp)）。
- 任意文本编辑器 + 浏览器。纯静态，无需 Node/Python。
## How：完整前端 Demo
把下面代码保存为 `fortune.html`，替换 `YOUR_APPKEY` 后用浏览器打开：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>号码测吉凶小工具</title>
<style>
body { font-family: system-ui, sans-serif; max-width: 640px; margin: 40px auto; padding: 0 16px; }
select, input, button { font-size: 16px; padding: 8px; margin: 6px 0; width: 100%; box-sizing: border-box; }
#result { margin-top: 16px; background: #faf7f0; border-radius: 8px; padding: 16px; min-height: 60px; }
.line { padding: 6px 0; border-bottom: 1px dashed #e5dcc8; }
.empty { color: #999; }
.tip { color: #b00; font-size: 13px; }
</style>
</head>
<body>
<h2>号码测吉凶小工具</h2>
<select id="type">
<option value="1">手机号</option>
<option value="2">车牌号</option>
<option value="3">QQ号</option>
<option value="4">公司名</option>
</select>
<input id="value" placeholder="输入对应内容，如 13770000000">
<button onclick="test()">测一测</button>
<div id="result">结果将显示在这里</div>
<p class="tip">※ 结果为周易数理的娱乐性参考，仅供娱乐，理性看待。</p>
<script>
const APPKEY = "YOUR_APPKEY";
// 各接入点对应的参数名
const PARAM = { "1": "mobile", "2": "carNo", "3": "qq", "4": "companyName" };
async function test() {
const type = document.getElementById("type").value;
const val = document.getElementById("value").value.trim();
const box = document.getElementById("result");
if (!val) { box.innerHTML = '<span class="empty">请先输入内容</span>'; return; }
box.textContent = "查询中…";
const url = `https://route.showapi.com/1617-${type}?appKey=${APPKEY}`;
const body = new URLSearchParams();
body.set(PARAM[type], val);
try {
const res = await fetch(url, { method: "POST", body, signal: AbortSignal.timeout(15000) });
const json = await res.json();
const b = json.showapi_res_body || {};
if (b.ret_code !== "0") { box.textContent = "失败：" + (b.remark || "未知错误"); return; }
const exp = b.expList || [];
if (!exp.length) { box.innerHTML = '<span class="empty">该内容暂未返回吉凶分析</span>'; return; }
box.innerHTML = exp.map((l) => `<div class="line">${escapeHtml(l)}</div>`).join("");
} catch (e) {
box.textContent = "请求异常：" + e.message;
}
}
function escapeHtml(s) {
return s.replace(/[&<>]/g, (c) => ({ "&": "&", "<": "<", ">": ">" }[c]));
}
</script>
</body>
</html>
```
## 返回示例与解析
打开页面试一下：选「手机号」、输入 `13770000000`、点「测一测」，返回会逐行渲染为：
```
号码：13770000000
数理：第81数
签语：最极之数，还本归元，能得繁业，发达成功
吉凶：吉
详解：主人的性格类型：[自我牺牲/性格被动型]……
```
切到「公司名」输入某名称，若返回空，页面会显示「该内容暂未返回吉凶分析」——这正是[公司名空 expList 边界](https://www.showapi.com/guides/fortune-company-guide-1617)的兜底。
## 进阶 / 边界
- **参数名随类型切换**：`mobile`/`carNo`/`qq`/`companyName` 一一对应四个接入点，Demo 用 `PARAM` 映射表统一管理。
- **安全提醒**：此 Demo 把 AppKey 写在前端，任何人开 F12 都能看到，仅适合本地/内测。正式上线请把请求放后端代理，AppKey 留在服务端。
- `expList` 用 `escapeHtml` 转义后再插入 DOM，避免内容里的 `<` `>` 破坏页面（虽罕见，但好习惯）。
- 想让展示更精致（卡片/徽标）？见[expList 结构化解析](https://www.showapi.com/guides/fortune-expList-parse-1617)。
## FAQ
**Q：为什么直接放前端 AppKey 不安全？**
前端代码对用户完全可见，AppKey 会被滥用、耗尽你的免费档位。仅本地测试可用，上线务必走后端代理。
**Q：Demo 在本地打开报跨域（CORS）吗？**
ShowAPI 接口支持浏览器跨域调用；若个别环境受限，把请求放后端即可。
**Q：公司名查出来空白正常吗？**
正常，是公司名接入点的实际边界，Demo 已做空态提示。详见[公司名测吉凶专篇](https://www.showapi.com/guides/fortune-company-guide-1617)。
**Q：能改成小程序/微信内页吗？**
逻辑一致：小程序用 `wx.request` 替换 `fetch`、参数相同；注意小程序需配置请求域名白名单。
## 相关能力 / 下一步阅读
- [测吉凶：5 分钟接入指南（手机号/车牌号/QQ号/公司名）](https://www.showapi.com/guides/fortune-quickstart-1617)
- [公司名测吉凶：接入点与「返回空 expList」边界说明](https://www.showapi.com/guides/fortune-company-guide-1617)
- [expList 数组结构化解析：把「数理/签语/吉凶/详解」拆成字段](https://www.showapi.com/guides/fortune-expList-parse-1617)
- **本系列共 13 篇**：查看[测吉凶指南总目录](https://www.showapi.com/guides/fortune-guides-1617)
