生肖运势查询：用 HTML + JS 做一个生肖运势卡片 Demo（含指数与开运信息展示）
# 生肖运势查询：用 HTML + JS 做一个生肖运势卡片 Demo（含指数与开运信息展示）
> 元信息：生肖运势查询（接入点 1） · 免费 · POST / GET · JSON · 前端开发者、产品/运营 · 阅读约 7 分钟
## 核心要点
- 一个纯前端 HTML 文件即可跑通：选生肖 → 调接口 → 渲染指数与开运信息。
- 指数（`*_star` 最高 5）用星级条展示；今日独有的幸运色/方位/数字/饰物/贵人单独成块。
- 浏览器直连可能受 CORS 限制，正式上线请用后端代理转发（见集成方案文章），本 Demo 用于快速验证与样式参考。
## Why：做一个可视化卡片能解决什么
运势是"看"的内容，光打印 JSON 没感觉。本文给你一个开箱即用的卡片 Demo：把事业/财运/爱情指数画成星级，把幸运色做成色块、幸运方位做成箭头，用户一眼就读懂今天该注意什么。可直接作为你产品"每日运势"模块的 UI 原型。
## What：Demo 包含什么
- 12 生肖下拉选择（内置拼音码映射，用户选中文即可）。
- 调 `route.showapi.com/2219-1` 取今日运势。
- 渲染：`shenxiao` 标题、三项指数星级、`lucky_color`/`lucky_direction`/`lucky_num`/`lucky_jewelry`/`lucky_noble`、三段文案。
- 依赖：原生 JS，无框架；替换 `YOUR_APPKEY` 即可运行。
## How：完整可运行 HTML
把下面内容存为 `fortune.html`，双击用浏览器打开，选生肖即可看到效果（把 `YOUR_APPKEY` 换成你的 AppKey）：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>生肖运势卡片 Demo</title>
<style>
body { font-family: system-ui, sans-serif; max-width: 420px; margin: 40px auto; }
.card { border: 1px solid #eee; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px #0001; }
select { width: 100%; padding: 8px; font-size: 16px; margin-bottom: 12px; }
.star { color: #e6a23c; letter-spacing: 2px; }
.lucky { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lucky span { background: #f5f7fa; border-radius: 6px; padding: 4px 8px; font-size: 13px; }
.txt { color: #555; font-size: 14px; margin: 6px 0; }
</style>
</head>
<body>
<div class="card">
<select id="sx">
<option value="shu">鼠</option><option value="niu">牛</option>
<option value="hu">虎</option><option value="tu">兔</option>
<option value="long">龙</option><option value="she">蛇</option>
<option value="ma">马</option><option value="yang">羊</option>
<option value="hou" selected>猴</option><option value="ji">鸡</option>
<option value="gou">狗</option><option value="zhu">猪</option>
</select>
<h2 id="title">—</h2>
<div id="stars"></div>
<div class="lucky" id="lucky"></div>
<div id="texts"></div>
</div>
<script>
const APPKEY = "YOUR_APPKEY"; // 换成你的 AppKey
async function load() {
const sx = document.getElementById("sx").value;
const url = `https://route.showapi.com/2219-1?appKey=${APPKEY}&sx=${sx}`;
try {
const data = await (await fetch(url, { signal: AbortSignal.timeout(15000) })).json();
const b = data.showapi_res_body || {};
if (b.ret_code !== 0) { alert("失败：" + b.remark); return; }
const d = b.day || {};
document.getElementById("title").textContent = b.shenxiao + " · 今日运势";
const star = (n) => "★".repeat(n) + "☆".repeat(5 - n);
document.getElementById("stars").innerHTML =
`<div>事业 <span class="star">${star(d.career_star||0)}</span></div>` +
`<div>财运 <span class="star">${star(d.money_star||0)}</span></div>` +
`<div>爱情 <span class="star">${star(d.love_star||0)}</span></div>`;
document.getElementById("lucky").innerHTML = [
["幸运颜色", d.lucky_color], ["开运方位", d.lucky_direction],
["幸运数字", d.lucky_num], ["开运饰物", d.lucky_jewelry],
["事业贵人", d.lucky_noble],
].filter(([, v]) => v).map(([k, v]) => `<span>${k}：${v}</span>`).join("");
document.getElementById("texts").innerHTML = [
["事业", d.career_txt], ["财运", d.money_txt], ["爱情", d.love_txt],
].filter(([, v]) => v).map(([k, v]) => `<div class="txt">${k}：${v}</div>`).join("");
} catch (e) { alert("请求失败：" + e.message); }
}
document.getElementById("sx").addEventListener("change", load);
load();
</script>
</body>
</html>
```
## 返回示例与解析
Demo 取到的 `day` 对象（以猴为例）：
```json
{
"shenxiao": "申猴",
"day": {
"career_star": 4, "money_star": 3, "love_star": 2,
"lucky_color": "浅蓝色", "lucky_direction": "正东方向",
"lucky_num": "1", "lucky_jewelry": "蓝宝石", "lucky_noble": "属鼠的人",
"career_txt": "在工作中今天很有耐心",
"money_txt": "今天的财运不错",
"love_txt": "在感情方面没有太多的变化，"
}
}
```
渲染逻辑：用 `career_star` 等算星级条；`lucky_*` 系列拼成标签；三段 `*_txt` 作为运势文案。注意**这些 `lucky_*` 仅今日有**，明日/本月对象不含，跨周期渲染时不要复用。
## 进阶 / 边界
- **CORS 提醒**：浏览器直连 `route.showapi.com` 可能因跨域被拦截。本 Demo 用于本地快速验证；正式上线请把请求放后端代理（隐藏 AppKey 同时规避 CORS），见《[生肖运势查询：集成到网站 / 小程序 / 公众号的实战方案](https://www.showapi.com/guides/shengxiao-fortune-app-integration-2219)》。
- **指数下限**：`*_star` 最高 5，渲染按 1~5 处理；缺失时按 0 显示空星。
- **数据缓存**：同一生肖每 2 小时才变，前端可缓存当日结果减少调用，见《[生肖运势查询：每 2 小时更新，如何设计缓存避免重复调用](https://www.showapi.com/guides/shengxiao-fortune-cache-2219)》。
## FAQ
**Q1：打开 HTML 后请求报错 / 没数据？**
A：多半是 CORS 或 AppKey 问题。确认已替换 `YOUR_APPKEY`；若浏览器报跨域，说明该环境不允许前端直连，需改用后端代理转发。
**Q2：为什么幸运色/方位在明日不显示？**
A：官方 `tomorrow` 对象不含 `lucky_*` 字段，这是真实结构差异，不是 Demo bug。跨周期渲染要按对象分别取值。
**Q3：能直接把这个 Demo 上线吗？**
A：不建议。前端硬编码 AppKey 有泄露风险，且直连有 CORS 问题。请改为后端代理模式后再上线。
**Q4：star 函数里 n 可能是字符串吗？**
A：官方 `*_star` 为 number，但 `lucky_num` 是 string。star 渲染只对 `*_star` 用，传入前按需 `Number()` 转换更稳妥。
**Q5：想展示本月运势怎么做？**
A：请求加 `needMonth=1`，但本月对象无 `*_star`，用 `total_txt`/`summary_txt`/`advice_txt` 文案呈现，见《[生肖运势查询：如何同时拿到今日 / 明日 / 本月运势](https://www.showapi.com/guides/shengxiao-fortune-daily-monthly-2219)》。
## 相关能力 / 下一步阅读
- [生肖运势查询：5 分钟接入，从注册到第一条运势结果](https://www.showapi.com/guides/shengxiao-fortune-quickstart-2219)
- [生肖运势查询：返回字段全解（day / month / tomorrow 三大对象差异与指数说明）](https://www.showapi.com/guides/shengxiao-fortune-response-fields-2219)
- [生肖运势查询：集成到网站 / 小程序 / 公众号的实战方案](https://www.showapi.com/guides/shengxiao-fortune-app-integration-2219)
- **本系列共 9 篇**：查看[生肖运势查询指南总目录](https://www.showapi.com/guides/shengxiao-fortune-guides-2219)
