功能介绍
jQuery九宫格抽奖是一种基于jQuery库的前端抽奖效果。通过九宫格的形式展示抽奖项，用户点击抽奖按钮后，九宫格开始旋转，最终停在一个随机位置上，此位置对应的抽奖项为用户的中奖结果。
本文实现九宫格的步骤为：
1. 创建一个包含九个格子的九宫格，通过php接口获取奖品信息。
2. 编写jQuery代码，监听抽奖按钮的点击事件，一旦点击，执行抽奖逻辑。
3. 在抽奖逻辑中，通过php接口获取抽奖结果。
4. 使用jQuery的动画函数，让九宫格开始旋转，最后在中奖方块位置停下。
5. 根据停止位置的抽奖项确定用户的中奖结果，并进行相关处理。
为了增加抽奖的趣味性和交互性，还可以在九宫格的格子上增加一些动态效果，例如使用CSS3的动画效果为格子添加旋转、放大等动画效果，或者在抽奖过程中播放一段音乐或动画等等。
效果图
代码实现
后端部分
获取奖品信息，正式项目可以存于数据库中方便后台管理
// 模拟九宫格的奖品 $prize = range(1, 9); $prizeArray = []; foreach ($prize as $value){ $prizeArray[] = [ 'id' => $value, 'name' => '第' . $value . '个奖品', 'weight' => $value * 10,// 权重 ]; } echo json_encode($prizeArray);
根据奖品权重获取抽奖结果
$totalWeight = array_sum(array_column($prizeArray, 'weight'));// 总权重 $randNumber = rand(1, $totalWeight);// 获取一个随机数 $currentWeight = 0;// 当前权重 $result = [];// 抽奖结果 foreach ($prizeArray as $value){ $currentWeight += $value['weight']; if ($randNumber <= $currentWeight){ $result = $value; break; } } echo $result['id'];
前端部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九宫格抽奖</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <div id="lottery-box"> <ul class="lottery-grid"> </ul> <button id="start-btn">开始抽奖</button> </div> <script src="jquery.min.js"></script> <script src="index.js"></script> </body> </html>
样式
#lottery-box { width: 320px; margin: 0 auto; text-align: center; } .lottery-grid { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; } .grid-item { width: 100px; height: 100px; line-height: 100px; border: 1px solid #000; } #start-btn { margin-top: 12px; }
JS部分，这里通过ajax获取奖品信息和抽奖结果，以及动画效果
$(document).ready(function() { $.ajax({ //请求资源路径 url:"prize.php", //请求方式 type:"POST", //请求成功后调用的回调函数 success:function (data) { data = $.parseJSON(data); for (let i = 0; i < data.length; i++){ $('.lottery-grid').append('<li class="grid-item">' + data[i]['name'] + '</li>'); } }, //请求失败后调用的回调函数 error:function () { alert("未获取到奖品"); } }); $('#start-btn').click(function() { $(this).prop('disabled', true); setTimeout(function(){ $('#start-btn').prop('disabled', false); }, 5000); // 禁用按钮5秒钟 const $gridItems = $('.grid-item'); $gridItems.css('background-color', '#fff'); // 获取抽奖结果 $.ajax({ //请求资源路径 url:"result.php", //请求方式 type:"POST", //请求成功后调用的回调函数 success:function (data) { let randomNumber = parseInt(data); // 开始动画效果 let currentIndex = 0; const interval = setInterval(function () { $gridItems.eq(currentIndex - 1).css('background-color', '#fff'); $gridItems.eq(currentIndex).css('background-color', '#8581812A'); currentIndex = (currentIndex + 1) % $gridItems.length; }, 200); // 停止动画，显示抽奖结果 setTimeout(function() { clearInterval(interval); for (let i = 1; i <= $gridItems.length; i++){ if (randomNumber === i){ $gridItems.eq(i).css('background-color', '#f00'); }else { $gridItems.eq(i).css('background-color', '#fff'); } } }, 5000); }, //请求失败后调用的回调函数 error:function () { alert("获取抽奖结果失败"); } }); }); });
