jQuery九宫格抽奖，php处理抽奖信息
功能介绍
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("获取抽奖结果失败");}});});
});
相关文章：
jQuery九宫格抽奖，php处理抽奖信息
功能介绍 jQuery九宫格抽奖是一种基于jQuery库的前端抽奖效果。通过九宫格的形式展示抽奖项，用户点击抽奖按钮后，九宫格开始旋转，最终停在一个随机位置上，此位置对应的抽奖项为用户的中奖结果。 本文实现九宫格的步骤为…...
2024年一级建造师考试成绩，即将公布！
一级建造师考试成绩一般在考试结束后3个月左右的时间公布！ 根据官方通知，重庆、江苏、青海、江西、云南、湖南、福建、北京、山西、黑龙江等地在今年一建报名通知里提到：2024年一级建造师考试成绩预计于2024年12月上旬公布。考生可在这个时间…...
M4V 视频是一种什么格式？如何把 M4V 转为 MP4 格式？
M4V 是一种视频文件格式，主要由苹果公司用于其产品和服务中，如 iTunes Store 上的电影和电视节目。这种格式可以包含受版权保护的内容，并且通常与苹果的 DRM（数字版权管理）技术结合使用，以限制内容的复制和…...
Leetcode 每日一题 104.二叉树的最大深度
目录 问题描述 示例 示例 1： 示例 2： 约束条件 题解 方法一：广度优先搜索（BFS） 步骤 代码实现 方法二：递归 步骤 代码实现 结论 问题描述 给定一个二叉树 root，我们需要返回其最大…...
文件上传漏洞：你的网站安全吗？
文章目录 文件上传漏洞攻击方式：0x01绕过前端限制0x02黑名单绕过1.特殊解析后缀绕过2..htaccess解析绕过3.大小写绕过4.点绕过5.空格绕过6.::$DATA绕过7.配合中间件解析漏洞8.双后缀名绕过9.短标签绕过 0x03白名单绕过1.MIME绕过(Content-Type绕过)2.%00截断3.0x00截…...
AWS账号提额
Lightsail提额 控制台右上角，用户名点开，选择Service Quotas 在导航栏中AWS服务中找到lightsail点进去 在搜索框搜索instance找到相应的实例类型申请配额 4.根据自己的需求选择要提额的地区 5.根据需求来提升配额数量,提升小额配额等大约1小时生效 Ligh…...
电子应用设计方案-29：智能云炒菜系统方案设计
智能云炒菜系统方案设计 一、系统概述 本智能云炒菜系统旨在为用户提供便捷、高效、个性化的烹饪体验，结合云技术实现远程控制、食谱分享、智能烹饪流程优化等功能。 二、系统组成 1. 炒菜锅主体 - 高品质不粘锅内胆，易于清洁和维护。 - 加热装置&#x…...
腾讯rapidJson使用例子
只需要把库的头文件拿下来加入项目中使用就行，我是以二进制文件存储内容并解析： #include <iostream> #include <fstream> #include <string> #include "rapidjson/document.h" #include "rapidjson/error/en.h"…...
UE5_CommonUI简单使用（2）
上篇我是简单写了一下CommonUI使用的初始设置以及Common Activatable Widget和Common Activatable Widget Stack以及Common 控件Style以及鼠标控制的一些内容，这些对于了解UMG的朋友来说没什么难度，唯一需要注意的就是Common Activatable Widget Stack堆栈管理只能是用来管理…...
探讨播客的生态系统
最近对播客发生了兴趣，从而引起了对播客背后的技术，生态的关注。本文谈谈播客背后的技术生态系统。 播客很简单 播客（podcast）本质上就是以语音的方式发布信息。它和博客非常类似。如果将CSDN 网站上的文字加一个语音播报。CSDN …...
淘宝架构演化
基本功能 LAMP（LinuxApacheMySQLPHP）标准架构，初期采用拿来主义，只具备基本功能。 数据库：读写分离，MyISAM存储引擎 2003年5月—2004年1月 存储瓶颈 mysql达到访问瓶颈，升级成oracle&#x…...
软通动力携子公司鸿湖万联、软通教育助阵首届鸿蒙生态大会成功举办
11月23日中国深圳，首届鸿蒙生态大会上，软通动力及软通动力子公司鸿湖万联作为全球智慧物联网联盟（GIIC）理事单位、鸿蒙生态服务（深圳）有限公司战略合作伙伴，联合软通教育深度参与了大会多项重磅…...
【AI绘画】DALL·E 3 绘图功能与 DALL·E API 探索
博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AI绘画 文章目录 💯前言💯DALLE 3 图像生成介绍（Introduction to DALLE 3 Image Generation）图像质量与分辨率图像生成机制的解析多图生成功能 💯使用 DALLE…...
【数据事务】.NET开源 ORM 框架 SqlSugar 系列
.NET开源 ORM 框架 SqlSugar 系列 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列【数据事务…...
深入解析下oracle char和varchar2底层存储方式
oracle数据库中，char和varchar2数据类型用来存储字符数据。char类型一旦定义多大，那么它就分配多少字节空间；varchar2类型定义多大，代表它可以扩展的最大大小为多大，一开始空间根据使用来决定。字符数据存储在oracle表…...
Angular v19 (三）：增量水合特性详解 - 什么是水合过程？有哪些应用场景？与 Qwik 相比谁更胜一筹？- 哪个技术好我就学哪个，这就是吸心大法吧
Angular在其最新版本 v19 中引入了增量水合（Incremental Hydration）这一特性。这一更新引发了开发者们广泛的讨论，特别是在优化首屏加载速度和改善用户体验方面。本文将详解水合过程的概念、增量水合的应用场景，以及它与类似框架如…...
宠物空气净化器推荐2024超详细测评 希喂VS霍尼韦尔谁能胜出
最近有粉丝一直在评论区和后台探讨宠物空气净化器是不是智商税的问题，有人认为宠物空气净化器肯定不是智商税，有些人认为将其购回家就是个没用的东西，还占地方，双方各有自己的观点。 其实宠物空气净化器和普通的空气净化器是有很大…...
一线、二线、三线技术支持
一线、二线、三线技术支持是企业IT支持体系中常见的分工模式，目的是高效解决技术问题，同时优化资源利用。以下是它们的具体定义和职责划分： 1. 一线技术支持 (Tier 1/Level 1 Support) 定义： 一线技术支持是直接面对最终用户或客…...
智截违规，稳保安全 | 聚铭视频专网违规外联治理系统新品正式发布
“千里之堤，毁于蚁穴”。 违规外联作为网络安全的一大隐患， 加强防护已刻不容缓。 这一次， 我们带着全新的解决方案来了 ——聚铭视频专网违规外联治理系统， 重磅登场！...
FFmpeg 的 codec 和 format
很多人容易混淆这二者区别 pcm_alaw, 这是 codec wav, 这是 format ffmpeg -formats 打印支持的所有 format ffmpeg -codecs 打印支持所有的 codec ffmpeg -i in.wav -y -ac 1 -ar 8000 -acodec pcm_alaw -f wav out.wav 把 in.wav 转换成 out.wav rtp/rtsp 等ÿ…...
厦门GEO软件哪家强？实测主流平台，为你揭秘推荐榜单
在数字化转型浪潮中，GEO（地理定位优化）软件成为企业提升本地化营销效率的关键工具。面对厦门市场上琳琅满目的GEO平台，如何选择一款适配自身业务需求、技术稳定且安全合规的解决方案，成为众多企业面临的难题。作为第三…...
幻兽帕鲁存档迁移完全手册：告别数据丢失的终极解决方案
幻兽帕鲁存档迁移完全手册：告别数据丢失的终极解决方案 【免费下载链接】palworld-host-save-fix 项目地址: https://gitcode.com/gh_mirrors/pa/palworld-host-save-fix 你是否曾在更换幻兽帕鲁服务器时，眼睁睁看着自己辛苦培养的角色数据消失无…...
Univer：企业级协作平台开发实战
Univer：企业级协作平台开发实战 【免费下载链接】univer Build AI-native spreadsheets. Univer is a full-stack framework for creating and editing spreadsheets on both web and server. With Univer Platform, Univer Spreadsheets is driven directly throug…...
别再只会用FFT了！用MATLAB的czt函数实现窄带信号高分辨率频谱分析
别再只会用FFT了！用MATLAB的czt函数实现窄带信号高分辨率频谱分析 在信号处理领域，频谱分析是最基础也是最重要的技术之一。传统上，工程师们习惯使用快速傅里叶变换（FFT）来获取信号的频域信息。然而，当面对…...
MiniCPM-V 4.5 本地部署全攻略：从环境配置到图片、视频、多图推理实战
MiniCPM-V 4.5 本地部署全攻略：从环境配置到图片、视频、多图推理实战 在人工智能技术飞速发展的今天，视觉-语言多模态模型正成为研究和应用的热点。MiniCPM-V 4.5作为这一领域的最新成果，凭借其卓越的性能和高效的推理能力，为开…...
别再乱装CUDA了！保姆级教程：从显卡驱动到PyTorch 2.x，一次搞定Windows深度学习环境
深度学习环境配置避坑指南：从显卡驱动到PyTorch 2.x全流程解析 刚接触深度学习的开发者，往往在环境配置阶段就遭遇重重阻碍。显卡驱动与CUDA版本不匹配、cuDNN安装失败、PyTorch下载缓慢等问题，让许多初学者在起步阶段就耗费大量时间。本文将…...
BGE-Large-Zh前沿探索：量子计算语义编码实验
BGE-Large-Zh前沿探索：量子计算语义编码实验 引言 量子计算正在重新定义计算的边界，而自然语言处理作为人工智能的核心领域，也迎来了与量子技术融合的历史性机遇。我们进行了一项创新实验：将BGE-Large-Zh这一强大的语义编码模型…...
Pixel Epic · Wisdom Terminal 部署与压测：使用.accelerate库优化推理性能
Pixel Epic Wisdom Terminal 部署与压测：使用.accelerate库优化推理性能 1. 引言 如果你正在使用Pixel Epic Wisdom Terminal进行AI推理任务，可能会遇到性能瓶颈问题。今天我们就来聊聊如何用Hugging Face的.accelerate库来提升推理速度，…...
SecGPT-14B真实生成效果：漏洞成因解释、CVSS评分建议与PoC生成
SecGPT-14B真实生成效果：漏洞成因解释、CVSS评分建议与PoC生成 1. SecGPT-14B网络安全大模型简介 SecGPT是由云起无垠团队开发的开源大语言模型，专门针对网络安全领域优化。这个14B参数规模的模型采用vLLM框架部署，并通过Chainlit提供用户友…...
Unity物理游戏开发：如何用FixedTimestep优化不同设备的性能表现
Unity物理游戏开发：动态调整FixedTimestep实现跨设备性能优化 移动端游戏开发者常面临一个核心矛盾：物理模拟精度与设备性能的平衡。当你的游戏在高端设备上流畅运行，却在低端机型出现卡顿时，问题往往出在Fixed Timestep的静态配置…...