用纯HTML+CSS+JS实现转盘抽奖：核心是让指针（非转盘本体）旋转，用transform:rotate()配合cubic-bezier减速动画；JS计算随机目标角并监听transitionend防重复；奖品区域用conic-gradient或图片，中奖逻辑需服务端校验。
怎么用纯 HTML + CSS + JS 实现一个可点击的转盘抽奖
不需要框架，不用构建工具，一个 index.html 文件就能跑起来。核心是用 transform: rotate() 控制指针转动，配合 JS 计算停在哪个奖品区域。
常见错误：直接对转盘元素做 rotate() 动画，结果每次都是从 0° 开始转，看不出“惯性减速”效果；正确做法是对指针（或遮罩层）单独旋转，转盘本体保持静止，视觉更可控。
- 把奖品区域画在一张圆形图片上，或用 CSS
conic-gradient生成（注意 Safari 对conic-gradient支持较晚，iOS 15.4+ 才稳定） - 转动逻辑写在 JS 里：先生成随机角度（比如
Math.random() * 3600 + 360），再用transition: transform 3s cubic-bezier(0.34,1.56,0.64,1)模拟减速 - 别忘了加
pointer-events: none到转盘图层，否则鼠标悬停会干扰点击事件
点击按钮后如何禁用、防重复提交
用户手快连点两次，就可能触发两次抽奖逻辑——后一次会覆盖前一次的动画和结果，导致界面状态错乱。
最简单可靠的方案是在点击瞬间给按钮加 disabled 属性，并在动画结束回调里恢复。别依赖 setTimeout 估算时间，要用 CSS 动画的 transitionend 事件。
立即学习“前端免费学习笔记（深入）”；
- 按钮初始状态设为
<button id="draw-btn" disabled>开始抽奖</button>，JS 初始化完成后才移除disabled - 点击后立即执行：
btn.disabled = true，同时添加类名如is-spinning用于样式反馈 - 监听转盘元素的
transitionend事件（注意监听的是被旋转的 DOM 元素，不是按钮本身） - 回调里再执行
btn.disabled = false，并清除类名
怎么让中奖结果不“一眼看穿”
如果奖品区域角度固定、转动总圈数可预测，用户反复试几次就能摸清规律。必须引入不可控变量。
关键不是“随机”，而是“不可复现”。单纯用 Math.random() 不够，要结合用户交互延迟、点击时刻毫秒数、甚至设备陀螺仪（可选）来扰动结果。
- 基础版：用
Date.now() % prizes.length当索引，比纯Math.random()更难预判 - 进阶版：记录用户从页面加载到点击的时间差（
performance.now()），取小数点后 3 位参与计算 - 别把奖品数组顺序硬编码在 HTML 里，动态生成
<div class="prize" data-index="0">一等奖</div>，JS 只读data-属性 - 服务端校验仍是必须的——前端一切逻辑都可绕过，中奖结果最终以接口返回为准
移动端点击区域太小、响应迟钝怎么办
iOS Safari 默认有 300ms 点击延迟，且按钮默认尺寸在手机上容易误触。这不是 bug，是浏览器为双击缩放留的兼容窗口。
两个必须做的动作：启用快速点击，扩大热区。
- 在
<head>加<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> - 给按钮加
touch-action: manipulation，告诉浏览器“这个元素只用来点按” - 用
::after伪元素扩展点击范围：button::after { content: ""; position: absolute; top: -12px; left: -12px; right: -12px; bottom: -12px; } - 避免在按钮上同时绑定
click和touchstart，选其一即可；推荐统一用click，现代 iOS 已优化延迟
转盘中心点偏移、SVG 坐标系错位、iOS 上 transform-origin 解析异常……这些问题往往只在真机出现，开发时务必连着 iPhone 用 Safari 远程调试看实际渲染。
