HTML怎么做H5集卡活动_html H5集卡集福活动实现步骤

作者：袖梨 2026-06-06

用HTML+JS实现H5集卡需统一data-card-id标识卡片，通过transform:rotateY+transition做翻转动画，用opacity+pointer-events禁用未获得卡；localStorage存已收集卡数组（容错解析），保底逻辑前端可模拟但需防篡改。

怎么用 HTML + JS 实现集卡活动的卡片展示与翻转

纯前端实现 H5 集卡，核心是「状态管理 + 视觉反馈」，不需要后端也能跑通逻辑。关键不是堆动画，而是让每张卡的状态（是否拥有、是否已翻开、是否可点击）在 DOM 和 JS 中严格同步。

常见错误：click 事件绑在图片上却没阻止冒泡，导致连点两次触发重复逻辑；或者用 display: none 隐藏未获得卡，但用户抓包就能看到所有卡名和路径。

用 data-card-id 统一标识卡，不要靠文件名或顺序推断
翻转动画用 transform: rotateY(180deg) + transition，别用 visibility: hidden 切换——否则无法做翻转中止或暂停
未获得的卡，用 opacity: 0.4 + pointer-events: none 禁用交互，而不是删掉 DOM 或隐藏

示例结构：

<div class="card" data-card-id="tiger">  <div class="card-front"><img src="card_tiger_front.png"></div>  <div class="card-back"><img src="card_tiger_back.png"></div></div>

如何用 localStorage 持久化用户已收集的卡片

localStorage 是 H5 集卡最轻量可靠的本地存储方案，但要注意它只存字符串，且同源限制严格——微信内嵌浏览器、QQ 浏览器、iOS Safari 的私有模式都可能禁用或清空它。

典型坑：JSON.parse(localStorage.getItem('collected')) 报 SyntaxError，因为值被意外写成了 null 或 undefined 字符串。

立即学习“前端免费学习笔记（深入）”；

读取前必须做容错：

const collected = JSON.parse(localStorage.getItem('collected') || '[]');

写入时用 JSON.stringify()，别直接赋值对象——否则下次读出来是 [object Object]
避免高频写入：收集到新卡再存一次，不要每次点击都 localStorage.setItem
如果需要跨域同步（如从公众号跳小程序），就得换服务端 session 或 URL 参数透传，localStorage 不行

怎么模拟“抽卡”并控制概率与保底机制

前端生成随机卡本质是伪随机，真正的概率控制和保底（比如抽 10 次必得稀有卡）必须由后端下发结果，否则用户改 JS 就能无限刷 SSR。

但 MVP 阶段可先用前端模拟保底逻辑，仅用于演示或内测：用一个计数器记录连续未中次数，达到阈值就强制返回指定卡 ID。

保底计数也存在 localStorage 中，键名建议带时间戳前缀，比如 draw_streak_202406，避免跨月失效

概率数组别写死成 ['common', 'common', 'rare']，要用加权随机：

function weightedRandom(items) {  const total = items.reduce((sum, i) => sum + i.weight, 0);  let rand = Math.random() * total;  for (const item of items) {    rand -= item.weight;    if (rand <= 0) return item.id;  }}