首頁 php教程 php手册 php+jQuery实现网络转盘抽奖

php+jQuery实现网络转盘抽奖

Jun 06, 2016 pm 07:58 PM
公司 實現 抽獎 網路 轉盤

最近公司在搞节日活动,进行抽奖活动,无奈奖品很诱人,但是都是摆设,在网上找了一下,又加上自己的改进 1.新建一个html页面,css样式,布局啥的,网上down的图片 !DOCTYPE HTMLhtmlheadmeta charset=utf-8meta name=keywords content=jquery/meta name=des

最近公司在搞节日活动,进行抽奖活动,无奈奖品很诱人,但是都是摆设,在网上找了一下,又加上自己的改进


php+jQuery实现网络转盘抽奖

1.新建一个html页面,css样式,布局啥的,网上down的图片



		<meta charset="utf-8">
		<meta name="keywords" content="jquery">
		<meta name="description" content="抽奖大转盘">
		<title>PHP+JQUERY实现抽奖大转盘</title>
		<script type="text/javascript" src="../../../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
		<style type="text/css">
				.demo{width:417px;height:417px;position:relative;margin:50px auto}
				#disk{width:417px;height:417px;background:url(disk.jpg) no-repeat;}
				#start{width:163px;height:320px;position:absolute;top:46px;left:130px;}
				#start img{cursor:pointer}
		</style>
		<script type="text/javascript">
				$(function(){
						$("#startbtn").click(function(){
								lottery();
						});
				});
				function lottery(){
						$.ajax({
							type:&#39;POST&#39;,
							url:&#39;data.php&#39;,
							dataType:&#39;json&#39;,
							cache:false,
							error:function(){
								alert(&#39;出错啦!&#39;);
								return false;
							},
							success:function(json){ 
									$("#startbtn").unbind(&#39;click&#39;).css("cursor","default"); 
									var a = json.angle; //角度 
									var p = json.prize; //奖项 
									$("#startbtn").rotate({ 
										duration:3000, //转动时间 
										angle: 0, 
										animateTo:1800+a, //转动角度 
										easing: $.easing.easeOutSine, 
										callback: function(){ 
											var con = confirm(&#39;恭喜你,中得&#39;+p+&#39;\n还要再来一次吗?&#39;); 
											if(con){ 
												lottery(); 
											}else{ 
												return false; 
											} 
										} 
									}); 
								} 
							}); 
				}
		</script>


		<div class="demo">
				<div id="disk"></div>
				<div id="start"><img  src="/static/imghw/default1.png" data-src="start.png" class="lazy" id="startbtn" alt="php+jQuery实现网络转盘抽奖" ></div>
		</div>

登入後複製

2.php程序处理页
<?php $prize_arr=array(
        &#39;0&#39;=>array('id'=>1,'min'=>1,'max'=>29,'prize'=>'一等奖','v'=>1),
        '1'=>array('id'=>2,'min'=>302,'max'=>328,'prize'=>'二等奖','v'=>2),
        '2' => array('id'=>3,'min'=>242,'max'=>268,'prize'=>'三等奖','v'=>5),
        '3' => array('id'=>4,'min'=>182,'max'=>208,'prize'=>'四等奖','v'=>7),
        '4' => array('id'=>5,'min'=>122,'max'=>148,'prize'=>'五等奖','v'=>10),
        '5' => array('id'=>6,'min'=>62,'max'=>88,'prize'=>'六等奖','v'=>25),
        '6' => array('id'=>7,'min'=>array(32,92,152,212,272,332),
                                         'max'=>array(58,118,178,238,298,358),'prize'=>'七等奖','v'=>50)
);

//概率函数
function getRand($proArr) {
    $result = '';
     //概率数组的总概率精度
    $proSum = array_sum($proArr);
     //概率数组循环
    foreach ($proArr as $key => $proCur) {
        $randNum = mt_rand(1, $proSum);
        if ($randNum $val){
        $arr[$val['id']]=$val['v'];
}
$id=getRand($arr);//根据概率获取奖项id
$res=$prize_arr[$id-1];

$min=$res['min'];
$max=$res['max'];

if($res['id']==7){
        $i=mt_rand(0,5);
        $result['angle']=mt_rand($min[$i],$max[$i]);
}else{
        $result['angle']=mt_rand($min,$max);
}
$result['prize']=iconv('gb2312','UTF-8',$res['prize']);
echo json_encode($result);
exit;
?>
登入後複製


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

win10無法上網右下角顯示地球怎麼辦 win10網路成地球無法上網的多種解決方法 win10無法上網右下角顯示地球怎麼辦 win10網路成地球無法上網的多種解決方法 Feb 29, 2024 am 09:52 AM

這篇文章將介紹Win10系統網路顯示地球標誌但無法上網的解決方法。文章將提供詳細的操作步驟,幫助讀者解決Win10網路顯示地球無法上網的問題。方法一:直接重啟先檢查網路線是否沒插好,寬頻是否欠費,路由器或光貓可能會卡死,這時需重新啟動路由器或光貓。假如目前電腦沒有重要的事宜在操作,能直接重啟電腦,大部分的小問題能透過重新啟動電腦來快速解決。如果確定寬頻沒有欠費,網路正常,那便是另一回事。方法二:1、按【Win】鍵,或點選左下角的【開始選單】,在開啟的選單項目中,點選電源按鈕上方的齒輪狀圖標,這個就是【設

網路連不上wifi怎麼回事 網路連不上wifi怎麼回事 Apr 03, 2024 pm 12:11 PM

1.檢查wifi密碼:確保自己輸入的wifi密碼是正確的,並注意區分大小寫。 2.確認wifi是否正常運作:檢查wifi路由器是否正常運作,可將其他裝置連接至相同路由器,以確定問題是否出在裝置上。 3.重新啟動設備和路由器:有時候,設備或路由器發生故障或網路問題,重新啟動設備和路由器可能會解決問題。 4.檢查設備設定:確保設備無線功能為開啟狀態,且未將wifi功能停用。

華為手機如何實現雙微信登入? 華為手機如何實現雙微信登入? Mar 24, 2024 am 11:27 AM

華為手機如何實現雙微信登入?隨著社群媒體的興起,微信已成為人們日常生活中不可或缺的溝通工具之一。然而,許多人可能會遇到一個問題:在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說,實現雙微信登入並不困難,本文將介紹華為手機如何實現雙微信登入的方法。首先,華為手機自帶的EMUI系統提供了一個很方便的功能-應用程式雙開。透過應用程式雙開功能,用戶可以在手機上同

PHP程式設計指南:實作斐波那契數列的方法 PHP程式設計指南:實作斐波那契數列的方法 Mar 20, 2024 pm 04:54 PM

程式語言PHP是一種用於Web開發的強大工具,能夠支援多種不同的程式設計邏輯和演算法。其中,實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中,將介紹如何使用PHP程式語言來實作斐波那契數列的方法,並附上具體的程式碼範例。斐波那契數列是一個數學上的序列,其定義如下:數列的第一個和第二個元素為1,從第三個元素開始,每個元素的值等於前兩個元素的和。數列的前幾元

Windows 11 資料夾共用指南:輕鬆分享你的檔案和資料 Windows 11 資料夾共用指南:輕鬆分享你的檔案和資料 Mar 13, 2024 am 11:49 AM

在日常生活和工作中,我們經常需要在不同裝置之間共用檔案和資料夾。 Windows11系統提供了方便的內建資料夾共用功能,讓我們可以輕鬆地在同一網路內安全地與他人分享所需內容,同時保護個人檔案的隱私。這項功能使文件共享變得簡單而高效,不必擔心洩露私人資訊。透過Windows11系統的資料夾共享功能,我們可以更方便地進行合作、交流和協作,提高工作效率和生活便利性。為了順利配置共用資料夾,我們首先需要滿足以下條件:所有(參與共享的)設備都連接到同一個網路。啟用「網路發現」並配置好共享。知道目標設備中的

excel抽獎小程式如何製作 excel抽獎小程式如何製作 Mar 20, 2024 am 11:40 AM

平常的工作會遇到很多需要抽籤進行的內容,傳統的方法還是用紙質的號碼隨機抽籤,隨著電子軟體的發展,我們可以用電腦製作抽籤,今天欠們給大家分享的課程是excel抽獎小程式如何製作。 1.首先我們打開Excel軟體,打開我們準備好的表格,表格中要包含我們人的名字。  2、接著我們對右邊的單元格進行合併,將今晚誰幸運填充為黑色,並將下方的單元格合併填充為紅色,如下圖所示。  3、接著我們在紅色區域中輸入randbetween函數,設定第一行為2,最後一行為7,如下圖所示。  4、接著我們在前面輸入ind

如何在華為手機上實現微信分身功能 如何在華為手機上實現微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視,微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號,方便管理和使用。在華為手機上實現微信分身功能並不困難,只需要按照以下步驟操作即可。第一步:確保手機系統版本和微信版本符合要求首先,確保你的華為手機系統版本已更新至最新版本,以及微信App

藍色星原旅謠是哪個公司的 藍色星原旅謠是哪個公司的 Mar 22, 2024 pm 03:41 PM

藍色星原旅謠在近期公佈宣傳片之後登上了遊戲熱榜,許多玩家都非常好奇藍色星原旅謠是哪個公司的,其實是來自上海二次元廠商蠻啾新作,下面小編會為大家帶來藍色星原旅謠遊戲公司介紹,快來一起看看吧。藍色星原旅謠是哪一家公司的答案:是蠻啾網路推出的。 1.首先藍色星原旅謠是蠻啾旗下大世界RPG所推出的一款遊戲,已經在3月20日公佈了宣傳片。 2.這款產品在2023年10月拿到版號。遊戲的商標及營運單位均登記在一家叫的公司名下,後者成立於2023年2月,官網顯示其總部位於新加坡。 3.此次發布的11分鐘宣傳片裡透露出這

See all articles