新乡网站建设-中国互联网站登录入口
功能介绍
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("获取抽奖结果失败");}});});
});