r12/grid.html · 约 3254 字符
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="grid" id="grid"></div>
11 <div class="section-title">中奖结果</div>
12 <div class="banner" id="gresult" style="margin-top:0">点击中间按钮开始九宫格抽奖（演示数据）。</div>
13 <p class="note">防连点在动画期间自动锁定，避免重复触发。</p>
14</div>
15<script src="app.js"></script>
16<script>
17 const prizes = [
18 { emo: '📱', name: 'iPhone' }, { emo: '🎧', name: '耳机' }, { emo: '🎟️', name: '88券' },
19 { emo: '🌟', name: '积分' }, { emo: '🎁', name: '盲盒' }, { emo: '🍀', name: '再来' },
20 { emo: '💎', name: '钻石' }, { emo: '🏆', name: '神秘奖' },
21 ];
22 const order = [0, 1, 2, 5, 8, 7, 6, 3]; // 跑马灯顺时针 8 格（绕中心）
23 const grid = document.getElementById('grid');
24 const cells = [];
25 for (let i = 0; i < 9; i++) {
26 const c = document.createElement('div'); c.className = 'cell';
27 if (i === 4) { c.className += ' start'; c.innerHTML = '开始'; c.onclick = start; }
28 else { const p = prizes[i < 4 ? i : i - 1]; c.innerHTML = '<div class="emo">' + p.emo + '</div>' + p.name; }
29 grid.appendChild(c); cells.push(c);
30 }
31 let running = false;
32 function start() {
33 if (running) return; running = true;
34 const win = order[Math.floor(Math.random() * order.length)];
35 let step = 0, speed = 90, total = 8 * 3 + order.indexOf(win); // 3 圈 + 落到中奖格
36 track('grid_start', { win: prizes[win < 4 ? win : win + 1].name });
37 const timer = setInterval(() => {
38 cells.forEach(c => c.classList.remove('lit'));
39 const pos = order[step % 8]; cells[pos].classList.add('lit');
40 step++;
41 if (step > total) {
42 clearInterval(timer); running = false;
43 const wp = prizes[win < 4 ? win : win + 1];
44 document.getElementById('gresult').innerHTML =
45 '🎉 恭喜抽中：<b style="color:#f43f5e">' + wp.emo + ' ' + wp.name + '</b>（测试模拟数据）';
46 track('grid_end', { win: wp.name });
47 } else if (step === total - 6) { clearInterval(timer); runSlow(win, pos); }
48 }, speed);
49 }
50 function runSlow(win, pos) {
51 let step = 0; const timer = setInterval(() => {
52 cells.forEach(c => c.classList.remove('lit'));
53 const p = order[(step + order.indexOf(pos)) % 8]; cells[p].classList.add('lit');
54 step++;
55 if (step >= 6) {
56 clearInterval(timer);
57 const wp = prizes[win < 4 ? win : win + 1];
58 document.getElementById('gresult').innerHTML =
59 '🎉 恭喜抽中：<b style="color:#f43f5e">' + wp.emo + ' ' + wp.name + '</b>（测试模拟数据）';
60 }
61 }, 260);
62 }
63</script>
64</body></html>
65