用HTML+CSS+JS实现抽奖转盘需以容器为旋转目标，用transform: rotate()配合3s cubic-bezier过渡动画，角度设为360×n+随机偏移；点击前清空style.transform，转动后通过取余、减偏移、除扇区角度并向下取整匹配奖项；移动端监听touchstart并加viewport适配。
怎么用纯 HTML + CSS + JS 实现一个能点转的抽奖转盘
不用框架、不连后端，只靠三件套就能跑起来——关键在 transform: rotate() 控制转动，配合 Math.random() 生成随机角度，再用 CSS 动画收尾。新手最容易卡在“转完停不准”和“指针遮挡错位”上。
- 转盘图片或扇形区域必须用
position: relative包裹，指针用position: absolute固定在中心上方 - 旋转目标是整个转盘容器（不是图片本身），否则指针会跟着动
- 转动角度建议设为
360 * n + 随机偏移（n ≥ 5），避免只转半圈就停，影响“抽奖感” - 动画时长统一用
3s ease-out，别用linear，否则减速不自然，用户看不出停在哪一格
为什么点击按钮后转盘没反应或转得不对
90% 是事件绑定或 DOM 加载时机问题。常见错误：document.getElementById("spin-btn") 拿不到元素，因为 JS 在 HTML 前执行；或者 rotate() 写成 rotate(360deg) 却没加 transition，导致瞬间跳变。
- 把 JS 放在
</body>前，或用DOMContentLoaded包一层 -
transition: transform 3s cubic-bezier(0.34,1.56,0.64,1)比ease-out更有惯性感，推荐直接抄这个贝塞尔值 - 每次点击前先清掉上一次的
style.transform，否则角度会累加 - 别用
innerHTML动态插入转盘，容易破坏已绑定的事件，直接操作style.transform最稳
如何让中奖结果对应到正确扇区（比如转到“谢谢参与”）
不能靠肉眼估角度。真实逻辑是：预设每个扇区的角度范围（如 0–45° 是一等奖），转动结束后取最终角度对 360 取余，再比对区间。
- 假设 8 个奖项，每个占 45°，但起始偏移要预留指针宽度——通常把“0°”设在指针正下方，即转盘初始状态时，第一个奖品中心线对准指针下方 22.5°
- 最终角度 =
(currentRotate % 360 + 360) % 360（防负数），再减去偏移量，除以单区角度，向下取整得索引 - 别用
getBoundingClientRect()实时算位置，太慢且受缩放影响；角度映射是唯一可靠方式 - 示例：转完停在 287°，偏移量 22.5°，则
Math.floor((287 - 22.5) / 45) === 5→ 第 6 个奖品（索引从 0 开始）
移动端点不动、转盘变形或字体糊怎么办
响应式不是加个 viewport 就完事。主要矛盾在缩放、触摸事件和像素渲染。
立即学习“前端免费学习笔记（深入）”；
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须有，且不能写user-scalable=no，否则 iOS 会禁掉 touchstart - 转盘容器设
width: 300px; height: 300px;，用max-width: 90vw限制最大尺寸，避免大屏撑爆 - 指针用伪元素
::after而非额外 div，减少重排；文字用rem或vw，别用固定px - Android 上
click有 300ms 延迟，直接监听touchstart并preventDefault()，但记得同时兼容 PC 的click
转盘逻辑本身简单，难的是角度对齐、动画收尾和多端一致性。新手最容易反复调却停不准，其实问题不在随机数，而在初始偏移没算进公式里。
