纯html无法实现可交互抽奖转盘，必须用javascript控制逻辑与事件、css实现旋转动画与视觉效果、html仅提供结构。
纯 HTML 搭建不了真正可交互的抽奖转盘——它没有逻辑、不能响应点击、无法控制旋转动画或记录结果。你需要 JavaScript 驱动转盘逻辑，CSS 实现旋转动画和视觉分隔，HTML 仅负责结构容器和奖品列表。
为什么直接写 HTML 会卡在「点不动」这一步
HTML 是静态标记语言，<div> 写得再像转盘，点击后也不会动。常见错误是只写一个带 <code>class="wheel" 的 <div>，然后期待它自己转起来。实际上：<br>• 浏览器不会主动执行旋转，必须用 <code>transform: rotate() + transition 或 @keyframes
• 旋转角度必须由 JS 动态计算（比如 360° ÷ 奖品数 × 中奖索引）
• 点击事件监听、防连点、旋转中禁用按钮，全靠 addEventListener 和状态变量控制
rotate() 动画卡顿？检查 transform-origin 和 transition-timing-function
转盘看起来“顿”或“甩过头”，大概率是 CSS 动画配置不对：
• 必须设 transform-origin: center（否则绕左上角转）
• 用 transition: transform 4s cubic-bezier(0.34, 1.56, 0.64, 1) 替代默认 ease，模拟惯性减速效果
• 避免在 JS 中频繁读写 offsetLeft 或 getBoundingClientRect() 触发重排
• 不要给转盘父容器加 overflow: hidden 后又让指针超出——裁剪会导致视觉错位
奖品列表怎么映射到旋转角度？别硬算 360/n
手动算每个扇区角度容易偏移（尤其有边框、padding 或文字撑开时），更可靠的做法：
• 把所有奖品写成数组：const prizes = ['一等奖', '二等奖', '谢谢参与', ...]
• 用 Math.floor(Math.random() * prizes.length) 得到中奖索引 idx
• 总旋转角度 = 360 * (n - idx) + 360 * 5（n 是总份数，+1800° 保证至少转 5 圈，增强随机感）
• 最终角度对 360 取模不是必须的——CSS rotate() 支持超大数值，浏览器会自动归算
移动端点不中？touchstart 代替 click 就行
在 iOS Safari 或安卓 Chrome 上，单纯绑 click 会有约 300ms 延迟，且可能触发缩放。正确做法：
• 给按钮加 touchstart 事件监听，同时保留 click 兼容 PC
• 按钮样式加上 -webkit-tap-highlight-color: transparent 去除点击高亮
• 禁用双指缩放：<meta name="viewport" content="width=device-width, user-scalable=no">
• 转盘本身加 user-select: none，防止长按唤出菜单
最常被忽略的是「旋转结束回调」——没人告诉你 transitionend 事件可能在动画中途被新 transition 覆盖，导致中奖提示没弹出来。务必用 event.propertyName === 'transform' 做校验，且每次旋转前先移除旧监听器。
