搜尋
首頁php教程php手册PHP+jQuery+Ajax设置抽奖奖品和中奖概率

分享一款jQuery九宫格大转盘抽奖代码网页特效,点击抽奖按钮开始随机抽奖选择奖品,可设置起点位置、奖品数量、转动次数、中奖位置参数,并且后台ajax.php可设置奖品和中奖概率。
PHP+jQuery+Ajax设置抽奖奖品和中奖概率
首先我们在#lottery放置12个奖品,代码如下:<div> <br>     <table> <br>         <tr> <br>             <td><img src="/static/imghwm/default1.png" data-src="images/1.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>             <td><img src="/static/imghwm/default1.png" data-src="images/2.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>             <td><img src="/static/imghwm/default1.png" data-src="images/4.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>             <td><img src="/static/imghwm/default1.png" data-src="images/3.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>         </tr> <br>         <tr> <br>             <td><img src="/static/imghwm/default1.png" data-src="images/7.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>             <td><a></a></td> <br>             <td><img src="/static/imghwm/default1.png" data-src="images/5.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>         </tr> <br>         <tr> <br>             <td><img src="/static/imghwm/default1.png" data-src="images/1.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>             <td><img src="/static/imghwm/default1.png" data-src="images/6.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>         </tr> <br>         <tr> <br>             <td><img src="/static/imghwm/default1.png" data-src="images/3.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>             <td><img src="/static/imghwm/default1.png" data-src="images/6.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>             <td><img src="/static/imghwm/default1.png" data-src="images/8.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>             <td><img src="/static/imghwm/default1.png" data-src="images/7.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>         </tr> <br>     </table> <br> </div>点击“开始抽奖”按钮,并且远程ajax.php获取奖项:$(function() { <br>     lottery.init('lottery'); <br>     $("#lottery a").click(function() { <br>         if (click) { <br>             return false; <br>         } else { <br>             lottery.speed = 100; <br>             $.post("ajax.php", { <br>                 uid: 1 <br>             }, <br>             function(data) { //获取奖品,也可以在这里判断是否登陆状态 <br>                 $("#lottery").attr("prize_site", data.prize_site); <br>                 $("#lottery").attr("prize_id", data.prize_id); <br>                 $("#lottery").attr("prize_name", data.prize_name); <br>                 roll(); <br>                 click = true; <br>                 return false; <br>             }, <br>             "json") <br>         } <br>     }); <br> })Ajax.php
12个奖品数组如下,其中prize表示奖项内容,v表示中奖几率(若数组中七个奖项的v的总和为100,如果v的值为1,则代表中奖几率为1%,依此类推)$prize_arr = array( <br>     '0' => array('id' => 1, 'prize' => '一等奖', 'v' => 5), <br>     '1' => array('id' => 2, 'prize' => '二等奖', 'v' => 5), <br>     '2' => array('id' => 3, 'prize' => '三等奖', 'v' => 5), <br>     '3' => array('id' => 4, 'prize' => '四等奖', 'v' => 5), <br>     '4' => array('id' => 5, 'prize' => '五等奖', 'v' => 5), <br>     '5' => array('id' => 6, 'prize' => '六等奖', 'v' => 5), <br>     '6' => array('id' => 7, 'prize' => '七等奖', 'v' => 5), <br>     '7' => array('id' => 8, 'prize' => '八等奖', 'v' => 5), <br>     '8' => array('id' => 9, 'prize' => '九等奖', 'v' => 5), <br>     '9' => array('id' => 10, 'prize' => '十等奖', 'v' => 5), <br>     '10' => array('id' => 11, 'prize' => '十一等奖', 'v' => 25), <br>     '11' => array('id' => 12, 'prize' => '十二等奖', 'v' => 25), <br> );获取随机奖品:foreach ($prize_arr as $k=>$v) { <br>     $arr[$v['id']] = $v['v']; <br>  <br> } <br>  <br> $prize_id = getRand($arr); //根据概率获取奖项id  <br> foreach($prize_arr as $k=>$v){ //获取前端奖项位置 <br>     if($v['id'] == $prize_id){ <br>      $prize_site = $k; <br>      break; <br>     } <br> } <br> $res = $prize_arr[$prize_id - 1]; //中奖项  <br>  <br> $data['prize_name'] = $res['prize']; <br> $data['prize_site'] = $prize_site;//前端奖项从-1开始 <br> echo json_encode($data);PHP抽奖演示:http://www.sucaihuo.com/php/129.html

附件 PHP+jQuery+Ajax九宫格抽奖转盘.zip ( 640.71 KB 下载:324 次 )

AD:真正免费,域名+虚机+企业邮箱=0元

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
了解Python编程的入门级代码示例了解Python编程的入门级代码示例Jan 04, 2024 am 10:50 AM

了解Python编程的入门级代码示例Python是一种简单易学,功能强大的编程语言。对于初学者来说,了解Python编程的入门级代码示例是非常重要的。本文将为您提供一些具体的代码示例,帮助您快速入门。打印HelloWorldprint("HelloWorld")这是Python中最简单的代码示例。print()函数用于将指定的内容输出

PHP переменные в действии: 10 реальных примеров использованияPHP переменные в действии: 10 реальных примеров использованияFeb 19, 2024 pm 03:00 PM

PHP变量存储程序运行期间的值,对于构建动态且交互式的WEB应用程序至关重要。本文将深入探讨php变量,并通过10个真实的示例展示它们的实际应用。1.存储用户输入$username=$_POST["username"];$passWord=$_POST["password"];此示例从表单提交中提取用户名和密码,并将其存储在变量中以供进一步处理。2.设置配置值$database_host="localhost";$database_username="username";$database_pa

从入门到精通:Go语言中常用数据结构的代码实现从入门到精通:Go语言中常用数据结构的代码实现Mar 04, 2024 pm 03:09 PM

标题:从入门到精通:Go语言中常用数据结构的代码实现数据结构在编程中起着至关重要的作用,它是程序设计的基础。在Go语言中,有许多常用的数据结构,掌握这些数据结构的实现方式对于成为一名优秀的程序员至关重要。本文将介绍Go语言中常用的数据结构,并给出相应的代码示例,帮助读者从入门到精通这些数据结构。1.数组(Array)数组是一种基本的数据结构,是一组相同类型

如何使用PHP编写库存管理系统中的库存分仓管理功能代码如何使用PHP编写库存管理系统中的库存分仓管理功能代码Aug 06, 2023 pm 04:49 PM

如何使用PHP编写库存管理系统中的库存分仓管理功能代码库存管理是许多企业中不可或缺的一部分。对于拥有多个仓库的企业来说,库存分仓管理功能尤为重要。通过合理管理和跟踪库存,企业可以实现不同仓库之间的库存调拨,优化运营成本,改善协同效率。本文将介绍如何使用PHP编写库存分仓管理功能的代码,并为您提供相关的代码示例。一、建立数据库在开始编写库存分仓管理功能的代码之

Java实现简单的冒泡排序代码Java实现简单的冒泡排序代码Jan 30, 2024 am 09:34 AM

Java冒泡排序最简单的代码示例冒泡排序是一种常见的排序算法,它的基本思想是通过相邻元素的比较和交换来将待排序序列逐步调整为有序序列。下面是一个简单的Java代码示例,演示了如何实现冒泡排序:publicclassBubbleSort{publicstaticvoidbubbleSort(int[]arr){int

Go语言编程实例:Web开发中的代码示例Go语言编程实例:Web开发中的代码示例Mar 04, 2024 pm 04:54 PM

《Go语言编程实例:Web开发中的代码示例》随着互联网的快速发展,Web开发已经成为各行业中必不可少的一部分。作为一门功能强大且性能优越的编程语言,Go语言在Web开发中越来越受到开发者们的青睐。本文将通过具体的代码示例,介绍如何利用Go语言进行Web开发,让读者能够更好地理解和运用Go语言来构建自己的Web应用。1.简单的HTTP服务器首先,让我们从一个

华为云边缘计算对接指南:Java代码示例快速实现接口华为云边缘计算对接指南:Java代码示例快速实现接口Jul 05, 2023 pm 09:57 PM

华为云边缘计算对接指南:Java代码示例快速实现接口随着物联网技术的快速发展和边缘计算的兴起,越来越多的企业开始关注边缘计算的应用。华为云提供了边缘计算服务,为企业提供了高可靠的计算资源和便捷的开发环境,使得边缘计算应用更加容易实现。本文将介绍如何通过Java代码快速实现华为云边缘计算的接口。首先,我们需要准备好开发环境。确保你已经安装了Java开发工具包(

指导与示例:学习Java选择排序算法的实现指导与示例:学习Java选择排序算法的实现Feb 18, 2024 am 10:52 AM

Java选择排序法代码编写指南及示例选择排序是一种简单直观的排序算法,其思想是每次从未排序的元素中选择最小(或最大)的元素进行交换,直到所有元素排序完成。本文将提供选择排序的代码编写指南,并附上具体的Java示例代码。算法原理选择排序的基本原理是将待排序数组分为已排序和未排序两部分,每次从未排序部分选择最小(或最大)的元素,将其放到已排序部分的末尾。重复上述

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具