应使用 display: grid 实现九宫格，因其语义正确、响应式友好、动画流畅；抽奖需模拟加速→减速→停驻过程，配合高亮反馈与防重复点击机制。
九宫格结构用 grid 还是 table？
直接用 display: grid，别碰 table。后者语义错、响应式难调、动画卡顿，抽奖页面要转圈/高亮/暂停，grid 的 grid-template-areas 或 nth-child 定位更可控。
关键 CSS 写法：
`.lottery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
width: 300px;
margin: 20px auto;
}`
-
gap比margin更干净，避免子项外边距塌陷 - 列数写死为
3，别用auto-fit——抽奖格子必须严格 3×3，否则逻辑错乱 - 所有格子宽高需一致，用
aspect-ratio: 1或固定width/height
点击“开始”后如何让指针随机停在某个格子？
不是真随机选，而是模拟「加速→减速→停驻」过程。直接 Math.random() 选一个就停，用户会觉得假。
核心思路：用定时器逐步推进索引，后期放缓步长，最后锚定目标位置：
let currentIndex = 0;
let targetIndex = Math.floor(Math.random() * 9);
let step = 1;
let timer = setInterval(() => {
currentIndex = (currentIndex + step) % 9;
highlightCell(currentIndex); // 高亮当前格
if (step > 1 && currentIndex === targetIndex) step = Math.max(1, Math.floor(step * 0.8));
if (step === 1 && currentIndex === targetIndex) {
clearInterval(timer);
showPrize(prizes[currentIndex]);
}
}, 100);
- 初始
step设大（如5），快速滚动；逼近targetIndex后逐步降为1 - 用
% 9保证循环，但注意：第 0 格和第 8 格相邻，视觉上要符合顺时针/逆时针习惯 - 别用
setTimeout递归——容易因 JS 主线程阻塞导致延迟累积
怎么让中奖格子有“被选中”反馈？
纯 CSS 动画不够，得结合 JS 控制类名 + 过渡效果。重点不是动效多炫，而是让用户一眼确认结果。
- 中奖格子加
class="prize-win"，定义transform: scale(1.05)+box-shadow外发光 - 其他格子同步加
opacity: 0.7，强化对比（别只高亮中奖格） - 动画时长控制在
300ms以内，超过 400ms 用户会误以为卡了 - 如果中奖内容是图片，确保
img加loading="eager"，避免闪白
移动端点击没反应或连点触发多次怎么办？
真机上最常踩的坑：click 延迟、重复点击、touch 和 click 冲突。
- 给按钮加
touchstart事件，同时preventDefault()，禁掉 300ms 延迟 - 点击后立刻禁用按钮：
button.disabled = true，转盘停稳再恢复 - 用节流（throttle）包裹启动逻辑，间隔至少
2000ms，防止手滑狂点 - 别监听
click又监听touchend——iOS Safari 会触发两次
实际跑起来你会发现，最难调的不是布局或动画，而是「停驻时机」和「用户感知节奏」的匹配——快了像没抽，慢了像卡死，中间那几百毫秒的 deceleration 曲线，得靠真机反复点十几次才能压准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
