首頁 後端開發 PHP問題 php如何實現抽獎程序

php如何實現抽獎程序

Jul 27, 2020 am 10:26 AM
php 抽獎程序

php實作抽獎程式的方法:首先在head中載入jquery庫檔案以及「jQueryRotate.js」;然後在「data.php」中建立多維數組;接著根據數組中設定的幾率計算出符合條件的id;最後呼叫getRand方法即可。

php如何實現抽獎程序

推薦:《PHP教學

準備工作

首先要準備素材,抽獎的介面用到兩張圖片,圓盤圖片和指針圖片,實際應用中可以依照不同的需求製作不同的圓盤圖片。

接著製作html頁面,實例中我們在body中加入如下程式碼:

<div class="demo"> 
    <div id="disk"></div> 
    <div id="start"><img src="start.png" id="startbtn"></div> 
</div>
登入後複製

我們用#disk來放置圓盤背景圖片,在css中控制,用#start來放置指針圖片start.png。

然後我們使用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}
登入後複製

jQuery

要想讓指標轉動起來,如果不借助flash的話,我們可以使用html5的canvas來實現圖片的旋轉,但需要考慮瀏覽器相容性,而一個jQuery外掛程式完全可以實現圖片(任意html元素)旋轉並相容於各大瀏覽器,它就是jQueryRotate.js。

使用jQueryRotate.js可以將圖片旋轉任意角度,可以綁定滑鼠事件,可以設定旋轉過程動畫效果以及callback回呼函數。

使用方法當然是先在head中載入jquery庫檔案以及jQueryRotate.js,然後我們使用以下程式碼就可以實現指標轉動了。

$(function(){ 
    $("#startbtn").rotate({ 
        bind:{ 
            click:function(){//绑定click单击事件 
                 var a = Math.floor(Math.random() * 360); //生成随机数 
                 $(this).rotate({ 
                         duration:3000,//转动时间间隔(转动速度) 
                         angle: 0,  //开始角度 
                        animateTo:3600+a, //转动角度,10圈+ 
                        easing: $.easing.easeOutSine, //动画扩展 
                        callback: function(){ //回调函数 
                            alert(&#39;中奖了!&#39;); 
                        } 
                 }); 
            } 
        } 
    }); 
});
登入後複製

上面的程式碼實現了:當點選指標「開始抽獎」按鈕,指針開始轉動,轉動角度為3600 a,即10圈後再轉動隨機產生的a角度,當轉動角度到達3600 a度時停止轉動。

要注意的是,easing:動畫擴充我們需要結合動畫擴充插件才能實現。關於easing插件在這篇文章中有介紹:jQuery Easing 動畫效果擴展

本文到此已完成了轉盤轉動指針的過程,但是需要結合抽獎控制才算一個完整的抽獎程序,我們在下篇文章中將介紹使用PHP來控制抽獎幾率,以及如何應用jQuery與PHP完成抽獎的互動過程,敬請期待。

 

 

PHP

首先,我們根據抽獎圓盤上的獎項設定對應角度和中獎幾率,我們在data.php中建構一個多維數組:

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

數組$prize_arr,id用來識別不同的獎項,min表示圓盤中各獎項區間對應的最小角度,max表示最大角度,如一等獎對應的最小角度:0,最大角度30,這裡我們設定max值為1、max值為29,是為了避免抽獎後指標指向兩個相鄰獎項的中線。由於圓盤中設定了多個七等獎,所以我們在數組中設定每個七等獎對應的角度範圍。 prize表示獎項內容,v表示中獎幾率,我們會發現,數組中七個獎項的v的總和為100,如果v的值為1,則代表中獎幾率為1%,依此類推。

關於中獎機率演算法,本站文章:PHP jQuery實作翻板抽獎有介紹經典的機率演算法,本文直接將程式碼拿來。

function getRand($proArr) { 
    $result = &#39;&#39;; 
 
    //概率数组的总概率精度 
    $proSum = array_sum($proArr); 
 
    //概率数组循环 
    foreach ($proArr as $key => $proCur) { 
        $randNum = mt_rand(1, $proSum); 
        if ($randNum <= $proCur) { 
            $result = $key; 
            break; 
        } else { 
            $proSum -= $proCur; 
        } 
    } 
    unset ($proArr); 
 
    return $result; 
}
登入後複製

函數getRand()會根據數組中設定的幾率計算出符合條件的id,我們可以接著呼叫getRand()。

foreach ($prize_arr as $key => $val) { 
    $arr[$val[&#39;id&#39;]] = $val[&#39;v&#39;]; 
} 
 
$rid = getRand($arr); //根据概率获取奖项id 
 
$res = $prize_arr[$rid-1]; //中奖项 
$min = $res[&#39;min&#39;]; 
$max = $res[&#39;max&#39;]; 
if($res[&#39;id&#39;]==7){ //七等奖 
    $i = mt_rand(0,5); 
    $result[&#39;angle&#39;] = mt_rand($min[$i],$max[$i]); 
}else{ 
    $result[&#39;angle&#39;] = mt_rand($min,$max); //随机生成一个角度 
} 
$result[&#39;prize&#39;] = $res[&#39;prize&#39;]; 
 
echo json_encode($result);
登入後複製

程式碼中,我們呼叫getRand(),獲得透過機率運算後得到的獎項,然後根據獎項中配置的角度範圍,在最小角度和最大角度間產生一個角度值,並建立數組,包含角度angle和獎項prize,最終以json格式輸出。

jQuery

在上文的基礎上,我們對前端jQuery程式碼進行改造,當點擊「開始抽獎」按鈕後,向後台data.php發送一個ajax請求,如果請求成功並返回獎項信息,則轉動指針,將指針最終指向位置轉動到data.php返回的角度值。

$(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; 
                    } 
                } 
            }); 
        } 
    }); 
}
登入後複製

我們建立自訂函數lottery(),在lottery()我們向data.php發送一個POST請求,如果成功返回中獎資訊後,呼叫rotate插件開始轉動,轉動角度由後台返回的角度決定,這裡我們用1800 a表示轉動的角度,即指針轉動6圈a度後停止,然後我們在單擊“開始抽獎”按鈕時調用lottery(),於是轉盤抽獎就完成。

以上是php如何實現抽獎程序的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡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)

適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南 適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南 Dec 24, 2024 pm 04:42 PM

PHP 8.4 帶來了多項新功能、安全性改進和效能改進,同時棄用和刪除了大量功能。 本指南介紹如何在 Ubuntu、Debian 或其衍生版本上安裝 PHP 8.4 或升級到 PHP 8.4

我後悔之前不知道的 7 個 PHP 函數 我後悔之前不知道的 7 個 PHP 函數 Nov 13, 2024 am 09:42 AM

如果您是經驗豐富的PHP 開發人員,您可能會感覺您已經在那裡並且已經完成了。操作

如何設定 Visual Studio Code (VS Code) 進行 PHP 開發 如何設定 Visual Studio Code (VS Code) 進行 PHP 開發 Dec 20, 2024 am 11:31 AM

Visual Studio Code,也稱為 VS Code,是一個免費的原始碼編輯器 - 或整合開發環境 (IDE) - 可用於所有主要作業系統。 VS Code 擁有大量針對多種程式語言的擴展,可以輕鬆編寫

在PHP API中說明JSON Web令牌(JWT)及其用例。 在PHP API中說明JSON Web令牌(JWT)及其用例。 Apr 05, 2025 am 12:04 AM

JWT是一種基於JSON的開放標準,用於在各方之間安全地傳輸信息,主要用於身份驗證和信息交換。 1.JWT由Header、Payload和Signature三部分組成。 2.JWT的工作原理包括生成JWT、驗證JWT和解析Payload三個步驟。 3.在PHP中使用JWT進行身份驗證時,可以生成和驗證JWT,並在高級用法中包含用戶角色和權限信息。 4.常見錯誤包括簽名驗證失敗、令牌過期和Payload過大,調試技巧包括使用調試工具和日誌記錄。 5.性能優化和最佳實踐包括使用合適的簽名算法、合理設置有效期、

php程序在字符串中計數元音 php程序在字符串中計數元音 Feb 07, 2025 pm 12:12 PM

字符串是由字符組成的序列,包括字母、數字和符號。本教程將學習如何使用不同的方法在PHP中計算給定字符串中元音的數量。英語中的元音是a、e、i、o、u,它們可以是大寫或小寫。 什麼是元音? 元音是代表特定語音的字母字符。英語中共有五個元音,包括大寫和小寫: a, e, i, o, u 示例 1 輸入:字符串 = "Tutorialspoint" 輸出:6 解釋 字符串 "Tutorialspoint" 中的元音是 u、o、i、a、o、i。總共有 6 個元

您如何在PHP中解析和處理HTML/XML? 您如何在PHP中解析和處理HTML/XML? Feb 07, 2025 am 11:57 AM

本教程演示瞭如何使用PHP有效地處理XML文檔。 XML(可擴展的標記語言)是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲

解釋PHP中的晚期靜態綁定(靜態::)。 解釋PHP中的晚期靜態綁定(靜態::)。 Apr 03, 2025 am 12:04 AM

靜態綁定(static::)在PHP中實現晚期靜態綁定(LSB),允許在靜態上下文中引用調用類而非定義類。 1)解析過程在運行時進行,2)在繼承關係中向上查找調用類,3)可能帶來性能開銷。

什麼是PHP魔術方法(__ -construct,__destruct,__call,__get,__ set等)並提供用例? 什麼是PHP魔術方法(__ -construct,__destruct,__call,__get,__ set等)並提供用例? Apr 03, 2025 am 12:03 AM

PHP的魔法方法有哪些? PHP的魔法方法包括:1.\_\_construct,用於初始化對象;2.\_\_destruct,用於清理資源;3.\_\_call,處理不存在的方法調用;4.\_\_get,實現動態屬性訪問;5.\_\_set,實現動態屬性設置。這些方法在特定情況下自動調用,提升代碼的靈活性和效率。

See all articles