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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/62242.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI界的信仰危机:单靠“规模化”智能增长的假设,正在面临挑战

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

Unity类银河战士恶魔城学习总结(P149 Screen Fade淡入淡出菜单)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了进入游戏和死亡之后的淡入淡出动画效果 UI_FadeScreen.cs 1. Animator 组件的引用 (anim) 该脚本通过 Animator 控制 UI 元…

【C语言篇】探索 C 语言结构体:从基础语法到数据组织的初体验

我的个人主页 我的专栏&#xff1a;C语言&#xff0c;希望能帮助到大家&#xff01;&#xff01;&#xff01;点赞❤ 收藏❤ 目录 什么是结构体结构体的定义与使用结构体内存布局嵌套结构体与指针结构体数组的操作结构体与函数结构体内存对齐机制位域与结构体的结合动态内存分…

COMSOL工作站:配置指南与性能优化

COMSOL Multiphysics 求解的问题类型相当广泛&#xff0c;提供了仿真单一物理场以及灵活耦合多个物理场的功能&#xff0c;供工程师和科研人员来精确分析各个工程领域的设备、工艺和流程。 软件内置的#模型开发器#包含完整的建模工作流程&#xff0c;可实现从几何建模、材料参数…

全面解析LLM业务落地:RAG技术的创新应用、ReAct的智能化实践及基于业务场景的评估框架设计

1. 如何让LLM更好的业务落地常见方法 等待新的大型模型版本:但是,每个新版本也会有时间限制。 自己训练模型:这种方法成本高昂且耗时,需要大量基础设施。它也只是一个临时解决方案。 LoRA(低秩自适应)微调:这种方法更简单、更便宜,可以更频繁地进行,但不能在线进行。模…

大语言模型LLM的微调代码详解

代码的摘要说明 一、整体功能概述 这段 Python 代码主要实现了基于 Hugging Face Transformers 库对预训练语言模型&#xff08;具体为 TAIDE-LX-7B-Chat 模型&#xff09;进行微调&#xff08;Fine-tuning&#xff09;的功能&#xff0c;使其能更好地应用于生成唐诗相关内容的…

js中判断数组和判断对象的方法

判断数组 Array.isArray() 方法 这是最推荐的方法&#xff0c;简单明了。它可以检测数组的情况&#xff0c;并且不会误报其他类型。 const arr [1, 2, 3]; console.log(Array.isArray(arr)); // trueconst notArray { key: value }; console.log(Array.isArray(notArray))…

Leetcode 131 Palindrome Partition

题意 把一个字符串分割成多个回文字符串的partition&#xff0c;返回所有的可能partion 链接 https://leetcode.com/problems/palindrome-partitioning/description/ 思考 这只是dfs套了一个回文问题 题解 dfs每次截取一段字符串&#xff0c;判断是否是回文 退出条件是遍…

qt5.14.2跟vs2022配置

1.qt6要在线安装&#xff0c;安装时间比较长&#xff0c;要求网络要稳定&#xff0c;不适合快速安装 2.使用qt5.14.2离线安装包&#xff0c;安装速度快&#xff0c;可以快速安装。 3.安装完qt.5.14.2后打开QtCreate4.0.1&#xff0c;打开 工具->选项->Kits,发现如下图: 没…

【拥抱AI】RAG(Retrieval-Augmented Generation)知识库的切片策略及其改进

1. RAG简介 RAG是一种结合了信息检索和文本生成的技术&#xff0c;它通过从一个外部的知识库中检索相关信息来增强生成模型的能力。这种方法可以提高生成内容的相关性和准确性&#xff0c;特别是在处理长文档时&#xff0c;有效的文本切片策略对于提升检索效率和质量至关重要。…

ESP32 wifi smartConfig 配网时密码错误导致一直死循环问题解决

项目场景 硬件:ESP32-LyraT-Mini V1.2开发板,使用的是ESP32-WROVER-E 模组。 程序:基于smart_config示例程序测试 问题描述 烧录程序后,debug打印“smartconfig_example: Scan done”信息后,打开手机app“EspTouch”进行配网,如果密码输入正确,正常的debug信息如下:…

webrtc ios h264 硬编解码

webrtc ios h264 硬编解码 一 ios 系统支持 从ios8开始&#xff0c;苹果公司开放了硬解码和硬编码API&#xff08;即 VideoToolbox.framework API&#xff09; 二 主要api 1 主要解码函数 VTDecompressionSessionCreate // 创建解码 session VTDecompressionSession…

深入解析 MySQL 启动方式:`systemctl` 与 `mysqld` 的对比与应用

目录 前言1. 使用 systemctl 启动 MySQL1.1 什么是 systemctl1.2 systemctl 启动 MySQL 的方法1.3 应用场景1.4 优缺点优点缺点 2. 使用 mysqld 命令直接启动 MySQL2.1 什么是 mysqld2.2 mysqld 启动 MySQL 的方法2.3 应用场景2.4 优缺点优点缺点 3. 对比分析结语 前言 MySQL …

Ubuntu20.04运行LARVIO

文章目录 1.运行 Toyish 示例程序2.运行 ROS Nodelet参考 1.运行 Toyish 示例程序 LARVIO 提供了一个简化的toyish示例程序&#xff0c;适合快速验证和测试。 编译项目 进入 build 文件夹并通过 CMake 编译项目&#xff1a; mkdir build cd build cmake -D CMAKE_BUILD_TYPER…

[2024年3月10日]第15届蓝桥杯青少组stema选拔赛C++中高级(第二子卷、编程题(2))

方法一&#xff08;string&#xff09;&#xff1a; #include <iostream> #include <string> using namespace std;// 检查是否为回文数 bool isPalindrome(int n) {string str to_string(n);int left 0, right str.size() - 1;while (left < right) {if (s…

HTML 中 a 标签跳转问题总结:从框架页面跳转的困境与突破

在 HTML 网页开发过程中&#xff0c;a 标签作为超链接的常用标记&#xff0c;其跳转功能看似简单&#xff0c;实则在一些特定场景下会遇到诸多复杂问题。本文将围绕一个具体的案例展开&#xff0c;深入探讨在框架页面中使用 a 标签跳转时所面临的挑战以及相应的解决方案&#x…

【Db First】.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 系列 &#x1f…

课题组自主发展了哪些CMAQ模式预报相关的改进技术?

空气污染问题日益受到各级政府以及社会公众的高度重视&#xff0c;从实时的数据监测公布到空气质量数值预报及预报产品的发布&#xff0c;我国在空气质量监测和预报方面取得了一定进展。随着计算机技术的高速发展、空气污染监测手段的提高和人们对大气物理化学过程认识的深入&a…

在 Django 中创建和使用正整数、负数、小数等数值字段

文章目录 在 Django 中创建和使用正整数、负数、小数等数值字段正整数字段&#xff08;Positive Integer&#xff09;PositiveIntegerField 负整数字段&#xff08;Negative Integer&#xff09;IntegerField 配合自定义验证 小数字段&#xff08;Decimal&#xff09;使用 Deci…

扫雷-完整源码(C语言实现)

云边有个稻草人-CSDN博客 在学完C语言函数之后&#xff0c;我们就有能力去实现简易版扫雷游戏了&#xff08;成就感满满&#xff09;&#xff0c;下面是扫雷游戏的源码&#xff0c;快试一试效果如何吧&#xff01; 在test.c里面进行扫雷游戏的测试&#xff0c;game.h和game.c…