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

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

news 文章来源：https://blog.csdn.net/zkxiaoxiangzhu/article/details/144079015 2024/12/26 18:40:48

功能介绍

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

分布式锁的实现原理

作者&#xff1a;来自 vivo 互联网服务器团队- Xu Yaoming 介绍分布式锁的实现原理。 一、分布式锁概述 分布式锁&#xff0c;顾名思义&#xff0c;就是在分布式环境下使用的锁。众所周知&#xff0c;在并发编程中&#xff0c;我们经常需要借助并发控制工具&#xff0c;如 mu…...

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

怎样提高自己的能量

能量转换的基本原则是让别人需要你&#xff0c;而不是你去求对方。别人需要你&#xff0c;你的能量就高&#xff0c;你去求别人你的能量就低。 怎样提高自己的能量&#xff1f; 第一&#xff0c;留意你的气场和格局。气场不是说你表现的多么霸道&#xff0c;而是你的信念、决心…...

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

ospf协议（动态路由协议）

ospf基本概念 定义 OSPF 是典型的链路状态路由协议&#xff0c;是目前业内使用非常广泛的 IGP 协议之一。 目前针对 IPv4 协议使用的是 OSPF Version 2 &#xff08; RFC2328 &#xff09;&#xff1b;针对 IPv6 协议使用 OSPF Version 3 &#xff08; RFC2740 &#xff09;。…...

编程日记 2024/11/30 10:14:22

【娱乐项目】竖式算术器

Demo介绍 一个加减法随机数生成器&#xff0c;它能够生成随机的加减法题目&#xff0c;并且支持用户输入答案。系统会根据用户输入的答案判断是否正确&#xff0c;统计正确和错误的次数&#xff0c;并显示历史记录和错题记录。该工具适合用于数学练习&#xff0c;尤其适合练习基…...

编程日记 2024/11/30 10:13:20

Qt中模拟鼠标消息并与系统鼠标消息进行区分

功能使用场景&#xff1a; 开发一个教学系统&#xff0c;包含了教师端、学生端&#xff0c;并且教师端支持示教功能。此时&#xff0c;学生端的鼠标、键盘不响应系统事件&#xff0c;但需要响应教师端发过来的鼠标移动、按下消息。 因为共享页面相同&#xff0c;为了提高局域…...

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

实时数据开发 | 一文理解Flink窗口机制

窗口操作在流处理和批处理之间起到了桥梁的作用。 Flink引擎本质上是流式引擎&#xff0c;认为批处理是流处理的一个特例。因此&#xff0c;通过窗口将流数据划分为有限大小的集合&#xff0c;使得在这些有界的数据集上可以进行批处理风格的计算。 通过配置窗口的参数&#xf…...

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

MFC 自定义树控件：树节点的样式与交互

在本教程中&#xff0c;将介绍如何在 MFC 应用程序中使用树控件 (CTreeCtrl) 进行高级定制&#xff0c;包括设置字体、颜色、徽章、图标、节点的高度等。通过这些自定义设置&#xff0c;可以显著提升用户界面的交互性和视觉效果。 1. 树控件基本设置 首先&#xff0c;我们需要…...

编程日记 2024/11/30 10:08:09

YOLOv8-ultralytics-8.2.103部分代码阅读笔记-loss.py

loss.py ultralytics\utils\loss.py 目录 loss.py 1.所需的库和模块 2.class VarifocalLoss(nn.Module): 3.class FocalLoss(nn.Module): 4.class DFLoss(nn.Module): 5.class BboxLoss(nn.Module): 6.class RotatedBboxLoss(BboxLoss): 7.class KeypointLoss(n…...

编程日记 2024/11/30 10:05:06

像素流送api ue多人访问需要什么显卡服务器

关于像素流送UE推流&#xff0c;在之前的文章里其实小芹和大家聊过很多&#xff0c;不过今天偶然搜索发现还是有很多小伙伴&#xff0c;在搜索像素流送相关的问题&#xff0c;搜索引擎给的提示有这些。当然这些都是比较短的词汇&#xff0c;可能每个人真正遇到的问题和想获取的…...

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

字符型注入‘)闭合

前言 进行sql注入的时候&#xff0c;不要忘记闭合&#xff0c;先闭合再去获取数据 步骤 判断是字符型注入 用order by获取不了显位&#xff0c;select也一样 是因为它是’)闭合&#xff0c;闭合之后&#xff0c;就可以获取数据了 最后就是一样的步骤...

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

wordpress图片单独存放/网站seo优化效果

为什么80%的码农都做不了架构师&#xff1f;>>> 从jdk1.5 java.lang包增加了这个接口。 实现这个接口允许对象成为 "foreach" 语句的目标&#xff0c;即增强的for循环。 然而此接口中只有一个接口类方法。 /** * Returns an iterator over a set of…...

编程日记 2024/12/26 17:56:14

php按步骤做网站/今天重大新闻国内最新消息

- Android 与服务器的通信方式主要有两种&#xff0c;一种是http 通信 &#xff0c;一种是socket 通信。 两者的最大差异在于&#xff0c;http连接使用的是“请求—响应方式”&#xff0c;即在请求时建立连接通道&#xff0c;当客户端向服务器发送请求后&#xff0c;服务器端才…...

编程日记 2024/12/26 17:31:49

lamp网站怎么建设/网站安全检测工具

【确实强悍】用ISA2006封锁QQ ,WebQQ 一直以来&#xff0c;封QQ都是很棘手的问题&#xff0c;今天我用一个看上去比较傻&#xff0c;但确比较实用的方法来封掉QQ和webQQ. 要想封掉QQ&#xff0c;还必须先得知道腾讯QQ的服务器&#xff0c;怎么知道呢&#xff0c;看我*作。 1.jp…...

编程日记 2024/12/26 17:09:26

顺德网站建设公司/北京疫情最新新闻

一般处理程序ashx获取Session不能想page页面那样直接Session["user"]解决方法&#xff1a; 实现IRequiresSessionState接口&#xff0c;举例&#xff1a; public class Aaa: IHttpHandler,IRequiresSessionState { public void ProcessRequest(HttpContext contex…...

编程日记 2024/12/26 12:50:24

wordpress公司模板下载/关键词工具软件

本视频由中国寒龙收集整理发布&#xff0c;更多请关注我们的博客和&#xff0c;我们的官网&#xff1a;www.hackerschina.org 感谢朋友们的支持&#xff01; 转载于:https://www.cnblogs.com/hackerschina/p/4788403.html...

编程日记 2024/12/26 5:13:23

宜昌便宜做网站/专业软文发布平台

作者&#xff1a;MobMsg&#xff0c;资深全端工程师一枚&#xff0c;架构师社区合伙人&#xff01;Thread 相关概念线程是系统资源分配的最小单位&#xff0c;它被包含在进程之中&#xff0c;是进程中的实际运作单位。JVM 允许应用程序同时运行、执行多个线程&#xff0c;每个线…...

编程日记 2024/12/26 4:13:33