jQuery九宫格抽奖,php处理抽奖信息

ops/2024/11/30 3:24:47/

功能介绍

jQuery九宫格抽奖是一种基于jQuery库的前端抽奖效果。通过九宫格的形式展示抽奖项,用户点击抽奖按钮后,九宫格开始旋转,最终停在一个随机位置上,此位置对应的抽奖项为用户的中奖结果。

本文实现九宫格的步骤为:
1. 创建一个包含九个格子的九宫格,通过php接口获取奖品信息。
2. 编写jQuery代码,监听抽奖按钮的点击事件,一旦点击,执行抽奖逻辑。
3. 在抽奖逻辑中,通过php接口获取抽奖结果。
4. 使用jQuery的动画函数,让九宫格开始旋转,最后在中奖方块位置停下。
5. 根据停止位置的抽奖项确定用户的中奖结果,并进行相关处理。

为了增加抽奖的趣味性和交互性,还可以在九宫格的格子上增加一些动态效果,例如使用CSS3的动画效果为格子添加旋转、放大等动画效果,或者在抽奖过程中播放一段音乐或动画等等。

效果图

代码实现

后端部分

获取奖品信息,正式项目可以存于数据库中方便后台管理

php">// 模拟九宫格的奖品
$prize = range(1, 9);
$prizeArray = [];
foreach ($prize as $value){$prizeArray[] = ['id' => $value,'name' => '第' . $value . '个奖品','weight' => $value * 10,// 权重];
}
echo json_encode($prizeArray);

根据奖品权重获取抽奖结果

php">$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获取奖品信息和抽奖结果,以及动画效果

javascript">$(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("获取抽奖结果失败");}});});
});


http://www.ppmy.cn/ops/137811.html

相关文章

价格分类(神经网络)

# 1.导入依赖包 import timeimport torch import torch.nn as nn import torch.optim as optimfrom torch.utils.data import TensorDataset, DataLoader from sklearn.model_selection import train_test_splitimport numpy as np import pandas as pd import matplotlib.pypl…

Linux:进程的概念

文章目录 一、 冯诺依曼体系结构二、操作系统(Operator System)1、概念2、设计OS的目的3、系统调用 三、进程的基本概念与基本操作1、概念2、描述进程——PCB3、task_struct4、getpid 获取进程ID5、ps axj 所有的以特定格式的进程6、kill - 9 pid 杀掉进程7、ls /proc 通过目录…

Rust学习笔记_03——元组

Rust学习笔记_01——基础 Rust学习笔记_02——数组 Rust学习笔记_03——元组 文章目录 Rust学习笔记_03——元组元组1. 定义元祖2. 访问元组中的元素3. 元组的解构4. 元组不可遍历和切片5. 元组作为函数返回值6. 单元元组7. 代码演示 元组 在Rust编程语言中&#xff0c;元组&a…

一款开源在线项目任务管理工具

简介 DooTask是一款开源在线项目任务管理工具&#xff0c;提供各类文档协作工具、在线思维导图、在线流程图、项目管理、任务分发、即时IM&#xff0c;文件管理等工具&#xff1b;同时消息功能使用非对称加密技术让你的沟通更安全。 安装 环境 必须安装&#xff1a;Docker v…

SpringCloud之Config:从基础到高级应用

目录 一、SpringCloud Config 简介1、SpringCloud Config 概述&#xff08;1&#xff09;核心概念&#xff08;2&#xff09;SpringCloud Config 的特点&#xff08;3&#xff09;应用场景&#xff08;4&#xff09;工作原理&#xff08;5&#xff09;优势&#xff08;6&#x…

2025-2026财年美国CISA国际战略规划(下)

文章目录 前言四、加强综合网络防御&#xff08;一&#xff09;与合作伙伴共同实施网络防御&#xff0c;降低集体风险推动措施有效性衡量 &#xff08;二&#xff09;大规模推动标准和安全&#xff0c;以提高网络安全推动措施有效性衡量 &#xff08;三&#xff09;提高主要合作…

飞书会话消息左右排列

飞书会话消息左右排列 1. 飞书登录后&#xff0c;点击头像&#xff0c;弹出菜单有个按钮设置 2. 3.

R Excel 文件操作指南

R Excel 文件操作指南 概述 R 语言是一种强大的统计分析工具&#xff0c;广泛用于数据分析和可视化。在实际应用中&#xff0c;经常需要将 R 语言与 Excel 文件结合使用&#xff0c;以便处理和分析数据。本指南将介绍如何在 R 中读取、写入和操作 Excel 文件。 准备工作 在…