应使用 requestAnimationFrame 实现五阶段转盘逻辑：启动→加速→匀速→减速→停止，通过 dataset 更新指针位置，避免 class 频繁切换导致跳帧；配合状态机防重复点击，确保中奖结果可控可回调。
怎么用纯 HTML + CSS + JavaScript 实现可交互的九宫格抽奖
九宫格抽奖不是靠 table 或栅格布局硬排就行，关键在「转盘式逻辑」和「视觉反馈闭环」。真正能用的版本，必须满足：点击触发、自动高亮当前格、按预设概率停在某格、支持重试且不卡顿。
为什么直接用 grid 布局 + setTimeout 转圈会出问题
常见写法是给 9 个 div 加 grid，再用定时器逐个加 active 类——这会导致：视觉跳帧、无法中断、中奖格不可控、移动端点击延迟。核心矛盾在于 DOM 更新节奏和动画帧不匹配。
- 浏览器对连续
class切换的渲染不保证每帧都执行，尤其在低端机上容易“跳格” -
setTimeout时间不准，叠加 9 格后误差放大，最终停不准 - 没做防重复点击，用户狂点会导致多个抽奖流程并发，
active状态错乱 - 没预留中奖回调，业务层拿不到结果，只能靠 DOM 查 class，耦合严重
推荐做法：用 requestAnimationFrame 控制转动节奏 + 状态机管理流程
把抽奖拆成「启动 → 加速 → 匀速 → 减速 → 停止」5 个阶段，每帧只更新一个格子的 data-index 和样式，用 dataset 记录当前指针位置，比操作 class 更轻量。
示例关键逻辑：
立即学习“前端免费学习笔记（深入）”；
let current = 0;
let isRunning = false;
const prizeList = [0, 1, 2, 3, 4, 5, 6, 7, 8]; // 对应九宫格索引
function spinTo(targetIndex) {
if (isRunning) return;
isRunning = true;
let step = 0;
const totalSteps = 36; // 转 4 圈（36格）再减速到目标
function animate() {
if (step < totalSteps - 9) {
current = (current + 1) % 9;
} else {
// 最后 9 步线性逼近 targetIndex
current = (targetIndex + 9 * (step - (totalSteps - 9))) % 9;
}
document.querySelector(`[data-index="${current}"]`).classList.add('highlight');
if (step < totalSteps) {
step++;
requestAnimationFrame(animate);
} else {
isRunning = false;
onPrizeEnd(prizeList[current]);
}
}
animate();
}
怎么让中奖结果看起来“随机但可控”
真随机容易被质疑，实际业务需要“伪随机+权重配置”。不要用 Math.random() 直接选，而是预先生成一个带权重的结果池，比如：['prizeA', 'prizeA', 'prizeB', 'prizeC']，再用 Math.floor(Math.random() * pool.length) 取值。这样既能控制中奖率，又避免服务端介入。
- 前端配置权重时，把高价值奖品对应更少的池子索引，低价值奖品铺更多索引
- 每次抽奖前打乱池子顺序（用 Fisher-Yates），否则固定顺序会被用户摸出规律
- 中奖后立刻禁用按钮，并显示结果浮层；3 秒后才恢复，防止误点
- 别忘了加
prefers-reduced-motion媒体查询，对开启“减少动画”的用户降级为淡入淡出
CSS 动画部分要慎用 transition 过渡高亮状态，它和 JS 手动切换 class 容易打架；建议所有视觉变化由 JS 控制 class 的增删，CSS 只负责定义 .highlight 的背景/缩放/阴影，不写 transition: all。
真正难的不是排九个格子，是让每一次点击都有确定性反馈、每一次停止都经得起用户盯三秒看——这得靠状态管理和帧节奏控制，而不是堆 CSS 类。
