当前位置：首页 > news >正文

手把手教你实现九宫格抽奖特效：前端开发实战指南

news 2026/7/15 20:51:48

前言：什么是九宫格抽奖特效？

九宫格抽奖是网页和移动端应用中常见的一种互动营销形式，它通过一个3x3的网格（九宫格）展示奖品，并让一个高亮的光标或指示器在格子间快速移动，最终随机停在某个奖品上，以此模拟抽奖过程。这种特效因其视觉冲击力强、交互体验有趣，被广泛应用于电商促销、游戏活动、品牌推广等场景。

本文将从前端开发者的角度，手把手带你从零实现一个完整的、可自定义的九宫格抽奖特效。我们将使用纯HTML、CSS和JavaScript（ES6+）来完成，确保代码清晰、易于理解和复用。

一、项目结构与基础HTML

首先，我们创建项目的基本结构。新建一个index.html文件，并搭建九宫格的骨架。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>九宫格抽奖特效</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>🎁 幸运大抽奖 🎁</h1> <!-- 九宫格奖品区域 --> <div class="lottery-grid" id="lotteryGrid"> <!-- 奖品格子将通过JS动态生成 --> </div> <!-- 控制区域 --> <div class="control-panel"> <button id="startBtn" class="btn start">开始抽奖</button> <button id="resetBtn" class="btn reset">重置</button> <div class="result" id="result">等待抽奖...</div> </div> </div> <script src="script.js"></script> </body> </html>

这里我们定义了一个容器，包含标题、一个用于放置九宫格的div（lottery-grid）以及一个控制面板。奖品格子将由JavaScript动态生成，以便灵活配置。

二、CSS样式设计与布局

接下来，创建style.css文件，为九宫格和交互元素添加样式。

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; } body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .container { background-color: rgba(255, 255, 255, 0.95); border-radius: 20px; padding: 40px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); text-align: center; max-width: 800px; width: 100%; } h1 { color: #333; margin-bottom: 30px; font-size: 2.5rem; } /* 九宫格样式 */ .lottery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 15px; margin: 30px auto; max-width: 500px; aspect-ratio: 1 / 1; } .grid-item { background: linear-gradient(145deg, #ffffff, #f0f0f0); border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 1.2rem; font-weight: bold; color: #555; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1), -5px -5px 15px rgba(255, 255, 255, 0.7); transition: all 0.3s ease; cursor: default; padding: 15px; position: relative; overflow: hidden; } .grid-item .prize-icon { font-size: 2rem; margin-bottom: 8px; } .grid-item .prize-name { font-size: 0.9rem; } /* 高亮（选中）状态 */ .grid-item.active { background: linear-gradient(145deg, #ffd166, #ffb347); color: #fff; box-shadow: 0 0 25px rgba(255, 179, 71, 0.7); transform: scale(1.05); } /* 控制面板样式 */ .control-panel { margin-top: 40px; } .btn { border: none; padding: 15px 30px; font-size: 1.1rem; border-radius: 50px; cursor: pointer; margin: 0 10px; transition: all 0.3s ease; font-weight: bold; } .start { background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); color: white; } .reset { background: linear-gradient(to right, #ff9a9e 0%, #fad0c4 100%); color: white; } .btn:hover { transform: translateY(-3px); box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2); } .btn:active { transform: translateY(0); } .result { margin-top: 25px; padding: 15px; background-color: #f8f9fa; border-radius: 10px; font-size: 1.3rem; color: #333; min-height: 60px; display: flex; align-items: center; justify-content: center; border-left: 5px solid #4facfe; } /* 响应式调整 */ @media (max-width: 600px) { .container { padding: 20px; } h1 { font-size: 2rem; } .lottery-grid { gap: 10px; } .grid-item { padding: 10px; font-size: 1rem; } .btn { padding: 12px 25px; font-size: 1rem; } }

我们使用了CSS Grid布局轻松创建3x3网格，并为每个格子设计了美观的拟物化阴影和渐变背景。.active类用于定义被“光标”选中的格子的高亮样式。

三、JavaScript核心逻辑实现

最后，也是最关键的部分：script.js。我们将在这里实现抽奖的动态逻辑。

// 奖品配置数据 const prizes = [ { icon: '💰', name: '10元红包' }, { icon: '🎮', name: '游戏皮肤' }, { icon: '☕', name: '咖啡券' }, { icon: '📚', name: '电子书' }, { icon: '🎉', name: '谢谢参与' }, // 中心格子 { icon: '🎵', name: '音乐会员' }, { icon: '🍔', name: '汉堡套餐' }, { icon: '✈️', name: '机票优惠券' }, { icon: '📱', name: '手机支架' } ]; // DOM元素 const lotteryGrid = document.getElementById('lotteryGrid'); const startBtn = document.getElementById('startBtn'); const resetBtn = document.getElementById('resetBtn'); const resultDisplay = document.getElementById('result'); // 状态变量 let isRolling = false; // 是否正在抽奖 let currentIndex = 0; // 当前高亮格子的索引 let rollSpeed = 100; // 初始滚动速度（毫秒） let targetIndex = -1; // 最终目标格子索引 let rollInterval = null; // 定时器 // 初始化九宫格 function initGrid() { lotteryGrid.innerHTML = ''; prizes.forEach((prize, index) => { const gridItem = document.createElement('div'); gridItem.className = 'grid-item'; gridItem.dataset.index = index; gridItem.innerHTML = ` ${prize.icon} ${prize.name} `; lotteryGrid.appendChild(gridItem); }); // 默认高亮第一个格子 highlightGridItem(0); } // 高亮指定索引的格子 function highlightGridItem(index) { // 移除所有格子的高亮 document.querySelectorAll('.grid-item').forEach(item => { item.classList.remove('active'); }); // 为当前索引的格子添加高亮 const items = document.querySelectorAll('.grid-item'); if (items[index]) { items[index].classList.add('active'); } currentIndex = index; } // 模拟光标移动（顺时针绕圈） function moveHighlight() { // 九宫格索引布局： // 0 1 2 // 7 8 3 // 6 5 4 const moveSequence = [0, 1, 2, 3, 4, 5, 6, 7, 8]; let seqIndex = moveSequence.indexOf(currentIndex); seqIndex = (seqIndex + 1) % moveSequence.length; // 移动到下一个位置 const nextIndex = moveSequence[seqIndex]; highlightGridItem(nextIndex); } // 开始抽奖 function startLottery() { if (isRolling) return; // 防止重复点击 isRolling = true; startBtn.disabled = true; startBtn.textContent = '抽奖中...'; resultDisplay.textContent = '好运即将降临...'; // 随机决定最终奖品（排除“谢谢参与”以增加中奖率，可根据需求调整） const winningPrizes = prizes.filter((_, idx) => idx !== 4); // 索引4是“谢谢参与” const randomPrize = winningPrizes[Math.floor(Math.random() * winningPrizes.length)]; targetIndex = prizes.findIndex(p => p.name === randomPrize.name); // 初始快速滚动 rollSpeed = 80; clearInterval(rollInterval); rollInterval = setInterval(moveHighlight, rollSpeed); // 模拟减速过程 setTimeout(() => { slowDownAndStop(); }, 2000); // 2秒后开始减速 } // 减速并停止 function slowDownAndStop() { const slowDownInterval = setInterval(() => { rollSpeed += 20; // 每次循环增加间隔，使速度变慢 clearInterval(rollInterval); if (rollSpeed >= 400) { // 速度足够慢时，跳到最终目标 clearInterval(slowDownInterval); clearInterval(rollInterval); setTimeout(() => { // 最终定格 highlightGridItem(targetIndex); isRolling = false; startBtn.disabled = false; startBtn.textContent = '开始抽奖'; // 显示结果 const winningPrize = prizes[targetIndex]; resultDisplay.innerHTML = `恭喜你！抽中了：${winningPrize.icon} ${winningPrize.name}`; resultDisplay.style.borderLeftColor = '#ffb347'; }, 300); } else { // 以新的速度继续滚动 rollInterval = setInterval(moveHighlight, rollSpeed); } }, 300); // 每300毫秒减速一次 } // 重置抽奖 function resetLottery() { clearInterval(rollInterval); isRolling = false; startBtn.disabled = false; startBtn.textContent = '开始抽奖'; highlightGridItem(0); resultDisplay.textContent = '等待抽奖...'; resultDisplay.style.borderLeftColor = '#4facfe'; rollSpeed = 100; } // 事件监听 startBtn.addEventListener('click', startLottery); resetBtn.addEventListener('click', resetLottery); // 页面加载时初始化 window.addEventListener('DOMContentLoaded', initGrid);

代码逻辑解析：

初始化：initGrid函数根据奖品数据动态生成九宫格DOM。
高亮移动：moveHighlight函数控制高亮光标按预设的顺时针路径（0→1→2→3→4→5→6→7→8→0...）移动。
抽奖流程：点击“开始抽奖”后，系统会随机选择一个目标奖品（这里排除了“谢谢参与”以提升体验），然后启动一个由快至慢的定时器模拟光标滚动，最后减速并停在目标格子上。
用户体验：通过按钮状态、文字提示和结果展示，让整个交互过程清晰流畅。