PHP+jQuery+Ajax设置抽奖奖品和中奖概率
分享一款jQuery九宫格大转盘抽奖代码网页特效,点击抽奖按钮开始随机抽奖选择奖品,可设置起点位置、奖品数量、转动次数、中奖位置参数,并且后台ajax.php可设置奖品和中奖概率。
首先我们在#lottery放置12个奖品,代码如下:<div> <br>
<table> <br>
<tr> <br>
<td><img src="/static/imghw/default1.png" data-src="images/1.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>
<td><img src="/static/imghw/default1.png" data-src="images/2.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>
<td><img src="/static/imghw/default1.png" data-src="images/4.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>
<td><img src="/static/imghw/default1.png" data-src="images/3.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>
</tr> <br>
<tr> <br>
<td><img src="/static/imghw/default1.png" data-src="images/7.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>
<td><a></a></td> <br>
<td><img src="/static/imghw/default1.png" data-src="images/5.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>
</tr> <br>
<tr> <br>
<td><img src="/static/imghw/default1.png" data-src="images/1.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>
<td><img src="/static/imghw/default1.png" data-src="images/6.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>
</tr> <br>
<tr> <br>
<td><img src="/static/imghw/default1.png" data-src="images/3.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>
<td><img src="/static/imghw/default1.png" data-src="images/6.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>
<td><img src="/static/imghw/default1.png" data-src="images/8.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <br>
<td><img src="/static/imghw/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元

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

《Go語言程式設計實例:Web開發中的程式碼範例》隨著網路的快速發展,Web開發已成為各行業中不可或缺的一部分。作為一門功能強大且效能優越的程式語言,Go語言在Web開發中越來越受到開發者們的青睞。本文將透過具體的程式碼範例,介紹如何利用Go語言進行Web開發,讓讀者更能理解並運用Go語言來建立自己的Web應用。 1.簡單的HTTP伺服器首先,讓我們從一個

了解Python程式設計的入門程式碼範例Python是一種簡單易學,功能強大的程式語言。對於初學者來說,了解Python程式設計的入門級程式碼範例是非常重要的。本文將為您提供一些具體的程式碼範例,幫助您快速入門。列印HelloWorldprint("HelloWorld")這是Python中最簡單的程式碼範例。 print()函數用於將指定的內容輸出

Java冒泡排序最簡單的程式碼範例冒泡排序是一種常見的排序演算法,它的基本想法是透過相鄰元素的比較和交換來將待排序序列逐步調整為有序序列。以下是一個簡單的Java程式碼範例,示範如何實作冒泡排序:publicclassBubbleSort{publicstaticvoidbubbleSort(int[]arr){int

PHP變數儲存程式運行期間的值,對於建立動態且互動的WEB應用程式至關重要。本文將深入探討php變量,並透過10個真實的範例展示它們的實際應用。 1.儲存使用者輸入$username=$_POST["username"];$passWord=$_POST["password"];此範例從表單提交中提取使用者名稱和密碼,並將其儲存在變數中以供進一步處理。 2.設定配置值$database_host="localhost";$database_username="username";$database_pa

華為雲端邊緣運算對接指南:Java程式碼範例快速實現介面隨著物聯網技術的快速發展和邊緣運算的興起,越來越多的企業開始關注邊緣運算的應用。華為雲端提供了邊緣運算服務,為企業提供了高可靠的運算資源和便利的開發環境,使得邊緣運算應用更容易實現。本文將介紹如何透過Java程式碼快速實現華為雲端邊緣運算的介面。首先,我們需要準備好開發環境。確保你已經安裝了Java開發工具包(

如何使用PHP編寫庫存管理系統中的庫存分倉管理功能碼庫存管理是許多企業中不可或缺的一部分。對於擁有多個倉庫的企業來說,庫存分倉管理功能尤其重要。透過合理管理和追蹤庫存,企業可以實現不同倉庫之間的庫存調撥,優化營運成本,改善協同效率。本文將介紹如何使用PHP編寫庫存分倉管理功能的程式碼,並為您提供相關的程式碼範例。一、建立資料庫在開始編寫庫存分倉管理功能的程式碼之

標題:從入門到精通:Go語言中常用資料結構的程式碼實作資料結構在程式設計中起著至關重要的作用,它是程式設計的基礎。在Go語言中,有許多常用的資料結構,掌握這些資料結構的實作方式對於成為優秀的程式設計師至關重要。本文將介紹Go語言中常用的資料結構,並給出對應的程式碼範例,幫助讀者從入門到精通這些資料結構。 1.數組(Array)數組是一種基本的資料結構,是一組相同類型

Java選擇排序法程式碼編寫指南及範例選擇排序是一種簡單直觀的排序演算法,其想法是每次從未排序的元素中選擇最小(或最大)的元素進行交換,直到所有元素排序完成。本文將提供選擇排序的程式碼編寫指南,並附上具體的Java範例程式碼。演算法原理選擇排序的基本原理是將待排序數組分為已排序和未排序兩部分,每次從未排序部分選擇最小(或最大)的元素,將其放到已排序部分的末尾。重複上述
