💻 代码预览 · H5 抽奖转盘组件

1<!DOCTYPE html>
2<html lang="zh-CN">
3<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
4<title>大转盘抽奖 · H5 抽奖转盘组件</title>
5<link rel="stylesheet" href="style.css"></head>
6<body><div class="phone">
7  <div class="topbar"><span class="back">‹</span>大转盘抽奖<span class="sub">组件演示</span></div>
8  <div class="banner"><h1>🎯 大转盘抽奖组件</h1>
9    <p>高颜值转盘，奖项与概率在 JS 中配置；自带中奖动画与防连点机制，可接埋点。</p></div>
10  <div class="tag-row">
11    <span class="tag">conic-gradient 扇形</span><span class="tag">缓动旋转</span><span class="tag">概率可配</span>
12  </div>
13  <div class="wheel-wrap">
14    <div class="pointer"></div>
15    <div class="wheel-ring">
16      <div class="wheel" id="wheel"></div>
17    </div>
18    <div class="wheel-center" id="spinBtn">GO</div>
19  </div>
20  <div class="section-title">中奖结果</div>
21  <div class="banner" id="result" style="margin-top:0">点击中间 GO 开始抽奖（演示结果均为测试模拟数据）。</div>
22  <button class="btn" onclick="spin()">开始抽奖</button>
23  <p class="note">本组件所有中奖信息均为学习用的测试模拟数据，与现实无关。</p>
24</div>
25<script src="app.js"></script>
26<script>
27  const wheel = document.getElementById('wheel');
28  const N = PRIZES.length;
29  PRIZES.forEach((p, i) => {
30    const a = i * (360 / N) + 30;
31    const el = document.createElement('div');
32    el.className = 'prize-label';
33    el.style.transform = 'rotate(' + a + 'deg)';
34    el.innerHTML = '<span>' + p.emo + '<br>' + p.name.split(' · ')[0] + '</span>';
35    wheel.appendChild(el);
36  });
37  let spinning = false, curRot = 0;
38  function spin() {
39    if (spinning) return; spinning = true;
40    const idx = drawIndex(); track('wheel_start', { prize: PRIZES[idx].name });
41    const seg = 360 / N, target = 360 * 5 - (idx * seg + 30) + (Math.random() * 20 - 10);
42    curRot = target; wheel.style.transform = 'rotate(' + target + 'deg)';
43    setTimeout(() => {
44      spinning = false;
45      document.getElementById('result').innerHTML =
46        '🎉 恭喜抽中：<b style="color:#f43f5e">' + PRIZES[idx].name + '</b>（测试模拟数据）';
47      track('wheel_end', { prize: PRIZES[idx].name });
48    }, 4300);
49  }
50  document.getElementById('spinBtn').addEventListener('click', spin);
51</script>
52</body></html>
53