功能介绍
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("获取抽奖结果失败");
}
});
});
});
