当前位置： 首页 > news >正文

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

news 2025/11/2 0:38:17

功能介绍

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库的前端抽奖效果。通过九宫格的形式展示抽奖项&#xff0c;用户点击抽奖按钮后&#xff0c;九宫格开始旋转&#xff0c;最终停在一个随机位置上&#xff0c;此位置对应的抽奖项为用户的中奖结果。 本文实现九宫格的步骤为&#xf…...

编程日记 2024/11/30 10:46:59

2024年一级建造师考试成绩，即将公布！

一级建造师考试成绩一般在考试结束后3个月左右的时间公布&#xff01; 根据官方通知&#xff0c;重庆、江苏、青海、江西、云南、湖南、福建、北京、山西、黑龙江等地在今年一建报名通知里提到&#xff1a;2024年一级建造师考试成绩预计于2024年12月上旬公布。考生可在这个时间…...

编程日记 2024/11/30 10:45:58

M4V 视频是一种什么格式？如何把 M4V 转为 MP4 格式？

M4V 是一种视频文件格式&#xff0c;主要由苹果公司用于其产品和服务中&#xff0c;如 iTunes Store 上的电影和电视节目。这种格式可以包含受版权保护的内容&#xff0c;并且通常与苹果的 DRM&#xff08;数字版权管理&#xff09;技术结合使用&#xff0c;以限制内容的复制和…...

编程日记 2024/11/30 10:43:56

Leetcode 每日一题 104.二叉树的最大深度

目录 问题描述 示例 示例 1&#xff1a; 示例 2&#xff1a; 约束条件 题解 方法一&#xff1a;广度优先搜索&#xff08;BFS&#xff09; 步骤 代码实现 方法二&#xff1a;递归 步骤 代码实现 结论 问题描述 给定一个二叉树 root&#xff0c;我们需要返回其最大…...

编程日记 2024/11/30 10:42:55

文件上传漏洞：你的网站安全吗？

文章目录 文件上传漏洞攻击方式&#xff1a;0x01绕过前端限制0x02黑名单绕过1.特殊解析后缀绕过2..htaccess解析绕过3.大小写绕过4.点绕过5.空格绕过6.::$DATA绕过7.配合中间件解析漏洞8.双后缀名绕过9.短标签绕过 0x03白名单绕过1.MIME绕过(Content-Type绕过)2.%00截断3.0x00截…...

编程日记 2024/11/30 10:41:53

AWS账号提额

Lightsail提额 控制台右上角&#xff0c;用户名点开&#xff0c;选择Service Quotas 在导航栏中AWS服务中找到lightsail点进去 在搜索框搜索instance找到相应的实例类型申请配额 4.根据自己的需求选择要提额的地区 5.根据需求来提升配额数量,提升小额配额等大约1小时生效 Ligh…...

编程日记 2024/11/30 10:39:51

电子应用设计方案-29：智能云炒菜系统方案设计

智能云炒菜系统方案设计 一、系统概述 本智能云炒菜系统旨在为用户提供便捷、高效、个性化的烹饪体验&#xff0c;结合云技术实现远程控制、食谱分享、智能烹饪流程优化等功能。 二、系统组成 1. 炒菜锅主体 - 高品质不粘锅内胆&#xff0c;易于清洁和维护。 - 加热装置&#x…...

编程日记 2024/11/30 10:38:50

腾讯rapidJson使用例子

只需要把库的头文件拿下来加入项目中使用就行&#xff0c;我是以二进制文件存储内容并解析&#xff1a; #include <iostream> #include <fstream> #include <string> #include "rapidjson/document.h" #include "rapidjson/error/en.h"…...

编程日记 2024/11/30 10:37:49

UE5_CommonUI简单使用（2）

上篇我是简单写了一下CommonUI使用的初始设置以及Common Activatable Widget和Common Activatable Widget Stack以及Common 控件Style以及鼠标控制的一些内容，这些对于了解UMG的朋友来说没什么难度，唯一需要注意的就是Common Activatable Widget Stack堆栈管理只能是用来管理…...

编程日记 2024/11/30 10:34:45

探讨播客的生态系统

最近对播客发生了兴趣&#xff0c;从而引起了对播客背后的技术&#xff0c;生态的关注。本文谈谈播客背后的技术生态系统。 播客很简单 播客&#xff08;podcast&#xff09;本质上就是以语音的方式发布信息。它和博客非常类似。如果将CSDN 网站上的文字加一个语音播报。CSDN …...

编程日记 2024/11/30 10:33:44

淘宝架构演化

基本功能 LAMP&#xff08;LinuxApacheMySQLPHP&#xff09;标准架构&#xff0c;初期采用拿来主义&#xff0c;只具备基本功能。 数据库&#xff1a;读写分离&#xff0c;MyISAM存储引擎 2003年5月—2004年1月 存储瓶颈 mysql达到访问瓶颈&#xff0c;升级成oracle&#x…...

编程日记 2024/11/30 10:32:42

软通动力携子公司鸿湖万联、软通教育助阵首届鸿蒙生态大会成功举办

11月23日中国深圳&#xff0c;首届鸿蒙生态大会上&#xff0c;软通动力及软通动力子公司鸿湖万联作为全球智慧物联网联盟&#xff08;GIIC&#xff09;理事单位、鸿蒙生态服务&#xff08;深圳&#xff09;有限公司战略合作伙伴&#xff0c;联合软通教育深度参与了大会多项重磅…...

编程日记 2024/11/30 10:30:40

【AI绘画】DALL·E 3 绘图功能与 DALL·E API 探索

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AI绘画 文章目录 &#x1f4af;前言&#x1f4af;DALLE 3 图像生成介绍&#xff08;Introduction to DALLE 3 Image Generation&#xff09;图像质量与分辨率图像生成机制的解析多图生成功能 &#x1f4af;使用 DALLE…...

编程日记 2024/11/30 10:28:38

【数据事务】.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 系列【数据事务…...

编程日记 2024/11/30 10:27:37

深入解析下oracle char和varchar2底层存储方式

oracle数据库中&#xff0c;char和varchar2数据类型用来存储字符数据。char类型一旦定义多大&#xff0c;那么它就分配多少字节空间&#xff1b;varchar2类型定义多大&#xff0c;代表它可以扩展的最大大小为多大&#xff0c;一开始空间根据使用来决定。字符数据存储在oracle表…...

编程日记 2024/11/30 10:25:35

Angular v19 (三）：增量水合特性详解 - 什么是水合过程？有哪些应用场景？与 Qwik 相比谁更胜一筹？- 哪个技术好我就学哪个，这就是吸心大法吧

Angular在其最新版本 v19 中引入了增量水合&#xff08;Incremental Hydration&#xff09;这一特性。这一更新引发了开发者们广泛的讨论&#xff0c;特别是在优化首屏加载速度和改善用户体验方面。本文将详解水合过程的概念、增量水合的应用场景&#xff0c;以及它与类似框架如…...

编程日记 2024/11/30 10:24:34

宠物空气净化器推荐2024超详细测评 希喂VS霍尼韦尔谁能胜出

最近有粉丝一直在评论区和后台探讨宠物空气净化器是不是智商税的问题&#xff0c;有人认为宠物空气净化器肯定不是智商税&#xff0c;有些人认为将其购回家就是个没用的东西&#xff0c;还占地方&#xff0c;双方各有自己的观点。 其实宠物空气净化器和普通的空气净化器是有很大…...

编程日记 2024/11/30 10:23:33

一线、二线、三线技术支持

一线、二线、三线技术支持是企业IT支持体系中常见的分工模式&#xff0c;目的是高效解决技术问题&#xff0c;同时优化资源利用。以下是它们的具体定义和职责划分&#xff1a; 1. 一线技术支持 (Tier 1/Level 1 Support) 定义&#xff1a; 一线技术支持是直接面对最终用户或客…...

编程日记 2024/11/30 10:21:30

智截违规，稳保安全 | 聚铭视频专网违规外联治理系统新品正式发布

“千里之堤&#xff0c;毁于蚁穴”。 违规外联作为网络安全的一大隐患&#xff0c; 加强防护已刻不容缓。 这一次&#xff0c; 我们带着全新的解决方案来了 ——聚铭视频专网违规外联治理系统&#xff0c; 重磅登场&#xff01;...

编程日记 2024/11/30 10:19:28

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 等&#xff…...

编程日记 2024/11/30 10:18:27

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/10/25 8:00:21

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2025/10/30 5:08:13

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2025/10/24 5:14:45

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2025/10/27 23:46:07

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2025/10/31 1:01:14

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

编程新知 2025/10/12 2:03:36

从零开始了解数据采集（二十八）——制造业数字孪生

近年来&#xff0c;我国的工业领域正经历一场前所未有的数字化变革&#xff0c;从“双碳目标”到工业互联网平台的推广&#xff0c;国家政策和市场需求共同推动了制造业的升级。在这场变革中&#xff0c;数字孪生技术成为备受关注的关键工具&#xff0c;它不仅让企业“看见”设…...

编程新知 2025/10/28 0:39:41

C# winform教程(二)----checkbox

一、作用 提供一个用户选择或者不选的状态&#xff0c;这是一个可以多选的控件。 二、属性 其实功能大差不差&#xff0c;除了特殊的几个外&#xff0c;与button基本相同&#xff0c;所有说几个独有的 checkbox属性 名称内容含义appearance控件外观可以变成按钮形状checkali…...

编程新知 2025/10/27 11:44:22