💻 代码预览 · 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>中奖 / 未中奖两种状态，支持礼花动画与"再来一次"回调，样式可一键换肤。</p></div>
10  <div class="tag-row">
11    <span class="tag">弹窗动画</span><span class="tag">礼花特效</span><span class="tag">再来一次</span>
12  </div>
13  <button class="btn" onclick="showWin()">模拟中奖</button>
14  <button class="btn" style="background:linear-gradient(135deg,#94a3b8,#64748b);box-shadow:none" onclick="showLose()">模拟未中奖</button>
15  <p class="note">以下为默认展示的中奖弹窗效果（演示数据）。</p>
16  <div class="mask" id="mask">
17    <div class="modal">
18      <div class="confetti" id="confetti"></div>
19      <div class="crown">👑</div>
20      <h2>恭喜中奖！</h2>
21      <div class="prize">二等奖 · 无线耳机</div>
22      <p>奖品将以测试模拟数据展示，实际发放请以活动规则为准。</p>
23      <button class="btn" onclick="closeModal()">开心收下</button>
24      <button class="btn" style="background:#fff;color:#be123c;border:1px solid #fecdd3;box-shadow:none" onclick="closeModal()">再来一次</button>
25    </div>
26  </div>
27</div>
28<script>
29  function closeModal() { document.getElementById('mask').style.display = 'none'; }
30  function showWin() {
31    document.querySelector('.modal h2').textContent = '恭喜中奖！';
32    document.querySelector('.modal .prize').textContent = '二等奖 · 无线耳机';
33    document.getElementById('mask').style.display = 'flex'; buildConfetti();
34  }
35  function showLose() {
36    document.querySelector('.modal h2').textContent = '差一点点～';
37    document.querySelector('.modal .prize').textContent = '谢谢参与，再接再厉';
38    document.getElementById('mask').style.display = 'flex';
39  }
40  function buildConfetti() {
41    const box = document.getElementById('confetti'); box.innerHTML = '';
42    const colors = ['#f59e0b', '#f43f5e', '#fb7185', '#fbbf24', '#34d399'];
43    for (let i = 0; i < 18; i++) {
44      const s = document.createElement('i');
45      s.style.left = (Math.random() * 100) + '%';
46      s.style.background = colors[i % colors.length];
47      s.style.animationDelay = (Math.random() * .8) + 's';
48      box.appendChild(s);
49    }
50  }
51  buildConfetti();
52</script>
53</body></html>
54