一、實驗簡介現(xiàn)在許多網(wǎng)站都會在節(jié)假日或慶典的時候舉行一些抽獎活動吸引用戶。抽獎活動的類型有多" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運營 > 使用javascript、css、jquery和php實現(xiàn)轉(zhuǎn)盤抽獎

使用javascript、css、jquery和php實現(xiàn)轉(zhuǎn)盤抽獎

時間:2023-07-22 00:27:02 | 來源:網(wǎng)站運營

時間:2023-07-22 00:27:02 來源:網(wǎng)站運營

使用javascript、css、jquery和php實現(xiàn)轉(zhuǎn)盤抽獎:本課程由jayki發(fā)布在實驗樓,詳細教程及在線練習地址:PHP - 轉(zhuǎn)盤抽獎


一、實驗簡介

現(xiàn)在許多網(wǎng)站都會在節(jié)假日或慶典的時候舉行一些抽獎活動吸引用戶。抽獎活動的類型有多種,有轉(zhuǎn)盤抽獎,翻牌抽獎等等。實現(xiàn)方式大多都是由 flash 或 javascript 實現(xiàn)。本項目使用 javascript、html、css、jquery和 php 實現(xiàn)一個轉(zhuǎn)盤抽獎,javascript 實現(xiàn)轉(zhuǎn)盤轉(zhuǎn)動效果,jquery 實現(xiàn)與后臺異步通信,php 則實現(xiàn)后臺的獎品抽獎。

轉(zhuǎn)盤抽獎大致效果如圖1所示:

您可能需要學習以下課程:

二、準備工作

打開終端窗口,使用如下命令下載所需圖片和 jquery 文件:

git clone http://git.shiyanlou.com/shiyanlou/zhuanpan進入下載目錄:

cd zhuanpan

三、實現(xiàn)九宮格樣式

PS:熟悉 html 和 css 的可以跳過這部分,直接看下面完整的 html 代碼和 css 代碼。

1. HTML 部分

首先用 html 實現(xiàn)如上圖1所示的轉(zhuǎn)盤抽獎的九宮格樣式。創(chuàng)建一個空 html 文件命名為 index.html,寫入如下代碼:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>zhuanpan</title></head><body> <div> <ul> <li><img src="img1.jpg" /></li> <li><img src="img2.jpg" /></li> <li><img src="img3.jpg" /></li> <li><img src="img4.jpg" /></li> <li><img src="btn.jpg" /></li> <li><img src="img1.jpg" /></li> <li><img src="img2.jpg" /></li> <li><img src="img3.jpg" /></li> <li><img src="img4.jpg" /></li> </ul> </div></body></html>打開瀏覽器,顯示如下:

html 基本代碼就是這些,下面來增加樣式實現(xiàn)九宮格。

2. CSS 部分

首先為 div 增加長寬屬性,由于每個圖片大小為 129px*59px,div 長度要包含三個圖片的長度 129px*3=387px,div 寬度也要包含三個圖片的寬度 59px*3=177px,另外還有圖片間的間距,所以 div 長度可以設置為 500px,寬度設置為 250px。

另外將 div 設置居中顯示,并顯示邊框。為 div 設置樣式的 css 代碼如下:

div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 邊框}然后為包含 img 的 li 元素設置樣式。首先將 li 元素設置為向左浮動(float:left),長度、寬度設置為圖片的長寬大小,另外加上一個黑色邊框,設置圖片間的間距。

li{ width:129px; height:59px; border:3px solid black; float:left; // 向左浮動 margin:8px 0 0 8px; // 設置圖片間的間距 list-style:none;}打開瀏覽器,顯示如下:

從上圖可以看到,已經(jīng)達到我們所需的九宮格樣式了,不過有些地方需要修改一下。

中間點擊抽獎那張圖片不是顯示獎品信息,而是看做一個按鈕,我們可以將中間圖片的邊框設置為紅色,以示區(qū)別。

為包含這個圖片的li元素加上 class="btn",然后增加樣式代碼:

<!--增加class="btn"-->..........<li><img src="img4.jpg" /></li><li class="btn"><img src="btn.jpg" /></li><li><img src="img1.jpg" /></li>..........// 樣式文件.btn{ border:3px solid red; // 設置為紅色邊框 cursor:pointer; // 設置光標類型為指針 }最后我們還要設置一個樣式,就是當轉(zhuǎn)盤轉(zhuǎn)到一張圖片上時顯示的樣式。我們可以設置當轉(zhuǎn)盤轉(zhuǎn)到某張圖片上時,該包含該圖片的 li 元素邊框為紅色。

那轉(zhuǎn)動時怎樣將樣式加到元素上呢,這里借助 class 實現(xiàn)。當轉(zhuǎn)到某張圖片上時,為包含該圖片的 li 元素增加名為 cur 的 class,cur 類的樣式如下:

.cur{ border:3px solid red; // 設置為紅色邊框}這樣我們的 html 代碼基本 ok 了,完整代碼如下:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>zhuanpan</title><style type="text/css">div{ margin: 100px auto 0px; width:500px; height:250px; border:3px solid black;}li{ width:129px; height:59px; border:3px solid #000; float:left; margin:8px 0 0 8px; list-style:none;}.btn{ border:3px solid red; cursor:pointer;}.cur{ border:3px solid red;}</style></head><body> <div> <ul> <li><img src="img1.jpg" /></li> <li><img src="img2.jpg" /></li> <li><img src="img3.jpg" /></li> <li><img src="img4.jpg" /></li> <li class="btn"><img src="btn.jpg" /></li> <li><img src="img1.jpg" /></li> <li><img src="img2.jpg" /></li> <li><img src="img3.jpg" /></li> <li><img src="img4.jpg" /></li> </ul> </div></body></html>

四、javascript 實現(xiàn)轉(zhuǎn)動效果

下面我們用 javascript 來實現(xiàn)轉(zhuǎn)盤轉(zhuǎn)動效果。大家應該都看見過轉(zhuǎn)盤效果,先是慢慢轉(zhuǎn)動,然后加速穩(wěn)定,最后停在抽中的獎品上。那 javascript 怎么來實現(xiàn)這個效果呢,答案是使用 javascript 定時器函數(shù):setTimeout() 。

首先來看下 setTimeout() 函數(shù)的定義:

setTimeout(code,millisec)code:要調(diào)用的函數(shù)后要執(zhí)行的 JavaScript 代碼串。millisec:在執(zhí)行代碼前需等待的毫秒數(shù)。setTimeout() 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式,并且只執(zhí)行一次。

我們可以通過設置 setTimeout() 函數(shù)的第二個參數(shù)實現(xiàn)轉(zhuǎn)動的快慢。第一個參數(shù)實現(xiàn)轉(zhuǎn)動到圖片上,為包含該圖片的 li 元素增加樣式,還記得前面所說的 cur 類樣式嗎,現(xiàn)在用到了。

為了方便定位 li 元素,我們可以為每個li元素增加id,如下代碼所示:

...... <ul> <li id="c1"><img src="img1.jpg" /></li> <li id="c2"><img src="img2.jpg" /></li> <li id="c3"><img src="img3.jpg" /></li> <li id="c8"><img src="img4.jpg" /></li> <li class="btn"><img src="btn.jpg" /></li> <li id="c4"><img src="img1.jpg" /></li> <li id="c7"><img src="img2.jpg" /></li> <li id="c6"><img src="img3.jpg" /></li> <li id="c5"><img src="img4.jpg" /></li> </ul> ......我們?yōu)槊總€ li 元素增加了字符 c 加上數(shù)字序號的 id,但 id 并不是按照元素從上到下的順序來的,這是因為是按照轉(zhuǎn)動順序來的。

那么當轉(zhuǎn)到某張圖片上時,只要將包含該圖片的 li 元素增加 cur 類就行了。比如轉(zhuǎn)到第一張一等獎的圖片上,包含該圖片的 li 元素的 id 為 c1,所以執(zhí)行代碼為:

$('#c1').addClass('cur');當然,轉(zhuǎn)動過程不光要為該 li 元素增加 cur 類,還需要刪除它前面一步 li 元素的 cur 類。

下面我們來考慮怎么用 javascript 實現(xiàn)整個轉(zhuǎn)動過程。

這里將整個轉(zhuǎn)動過程需要經(jīng)過的每個元素保存在一個數(shù)組中,數(shù)組中每個元素同時也是一個數(shù)組,保存 li 元素的 id 和 setTimeout() 函數(shù)需要設置的毫秒數(shù)。

另外還需要一個變量(current)記錄當前執(zhí)行到哪一步。

代碼如下所示:

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">// 整個轉(zhuǎn)動過程所需的步驟var step = [['c1',0], // 第一個元素特殊設置['c1', 500],['c2', 400],['c3', 300],['c4', 200],['c5', 200],['c6', 200],['c7', 200],['c8', 200],['c1', 100],['c2', 100],['c3', 100],['c4', 100],['c5', 100],['c6', 100],['c7', 100],['c8', 100],['c1', 100],['c2', 100],['c3', 100],['c4', 100],['c5', 100],['c6', 100],['c7', 100],['c8', 100],['c1', 100],['c2', 100],['c3', 100],['c4', 100],['c5', 100],['c6', 100],['c7', 100],['c8', 100],['c1', 100],['c2', 200],['c3', 300],['c4', 300],['c5', 300],['c6', 300],['c7', 300],['c8', 300],['c1', 400],['c2', 400],['c3', 400],['c4', 400],['c5', 400],['c6', 400],['c7', 400],['c8', 400]];// 記錄當前步數(shù),即step數(shù)組的下標var current = 1;// 設置樣式和重新設置定時器function run(){ // 刪除之前設置的cur類 $('#'+step[current-1][0]).removeClass('cur'); // 為當前元素設置cur類 $('#'+step[current][0]).addClass('cur'); // 判斷step數(shù)組所有步驟是否已經(jīng)走完 if(current == step.length - 1){ alert("over"); window.location.reload(); }else{ // 重新設置定時器 setTimeout('run()', step[current][1]); current++; }}</script>下面我們來看看效果怎么樣。首先將上面的 js 代碼添加到 index.html文件中 </div> 的后面,并且為中間的按鈕添加一個單擊事件。

<li class="btn"><img src="btn.jpg" onclick="run();"/></li>打開瀏覽器,點擊按鈕,轉(zhuǎn)盤已經(jīng)開始轉(zhuǎn)動,轉(zhuǎn)盤效果已經(jīng)實現(xiàn)了。

上面 step 數(shù)組第一個元素特殊設置需要說明一下,因為剛開始執(zhí)行 run 函數(shù)時,執(zhí)行到 $('#'+step[current-1][0]).removeClass('cur'); 這一步時,此時還沒 li 元素被加上 cur 類。因此將 current 初始值設置為 1,并且 step 前兩個元素都是指向第一個 li 元素。這樣 $('#'+step[current-1][0]).removeClass('cur'); 和 $('#'+step[current][0]).addClass('cur'); 操作的都是 id=’c1’ 的 li 元素,不會影響到其他元素。

另外,上面的轉(zhuǎn)盤每次都會轉(zhuǎn)到最后一張圖片上停止,那么下面來設置讓轉(zhuǎn)盤停到指定的圖片上。

// 判斷step數(shù)組所有步驟是否已經(jīng)走完 if(current == step.length - 1){ alert("over"); window.location.reload(); }我們是通過上面的代碼來判斷是否結(jié)束的,那么我們可以通過修改上面的代碼實現(xiàn)讓轉(zhuǎn)盤停止到指定的圖片上。

上面圖 5 標識了每張圖片的序號,假如我們要轉(zhuǎn)盤停止到第二張圖片上(序號為2),我們可以修改代碼為:

// 判斷是否結(jié)束 if(step.length - current - 1 + 2 == 8){ alert("over"); window.location.reload(); }其中 8 表示總共圖片數(shù)量(不包括按鈕)。打開瀏覽器,點擊按鈕發(fā)現(xiàn)停在了第二張圖片上了。

上面代碼中的 2 和 8,我們用全局變量表示。變量 data 表示要求停到哪張圖片上,變量 total 表示圖片總量(不包括按鈕)。修改代碼如下:

var data = 1; // 指定需要停在圖片的序號 var total = 8; // 圖片總量(不包括按鈕) .................. // 判斷是否結(jié)束 if(step.length - current - 1 + data == total){ alert("over"); window.location.reload(); }至此,轉(zhuǎn)動效果已經(jīng)完成了。

五、PHP 實現(xiàn)獎品抽獎

下面我們要用 PHP 代碼實現(xiàn)每個獎品的不同抽獎概率,假設三等獎的概率為 1/30,二等獎的概率為 1/60,一等獎的概率為 1/90,下面直接給出 php 代碼:

$category = 3; // 獎品種類數(shù)$lucknum = 0; // 幸運數(shù)字// 每個獎品依次中獎的概率$probability = array( 10, // 三等獎 20, // 二等獎 30, // 一等獎);// 獎品名稱$prizename = array( 'third prize', 'second prize', 'first prize',);// 隨機選擇對哪個獎品種類進行抽獎$caterandom = mt_rand(0, $category - 1); // 對之前隨機選擇的獎品種類進行抽獎$random = mt_rand(0, $probability[$caterandom]);$probability 數(shù)組元素與 $prizename 數(shù)組元素是對應的。

下面詳細說下抽獎過程:

  1. 首先 $caterandom = mt_rand(0, $category - 1); 隨機從三個獎品種類中選擇一個,這樣每個獎品被選到的概率為1/3。

  2. 之后 $random = mt_rand(0, $probability[$caterandom]); 對選到的獎品種類在指定的數(shù)字之間隨機選取一個數(shù)字。假如第一步選到的獎品種類是三等獎,$category 即為0,$probability[$caterandom] 即為 10,mt_rand(0,10) 會在 0 到 10 之間(不包含10)選擇一個數(shù)字,這樣隨機得到幸運數(shù)字 0($lucknum = 0;)的概率為 1/10。這樣抽到三等獎的概率為 (1/3) * (1/10) = 1/30。

  3. 最后根據(jù)隨機獲得的數(shù)字返回相應的信息給前端js,前端js根據(jù)后臺傳輸?shù)男畔崿F(xiàn)轉(zhuǎn)盤轉(zhuǎn)動效果并設置停止在哪張圖片上和提示信息。

完整 php(index.php)代碼如下所示:

<?php$category = 3; // 獎品種類數(shù)$lucknum = 0; // 幸運數(shù)字// 每個獎品依次中獎的概率$probability = array( 10, // 三等獎 20, // 二等獎 30, // 一等獎);// 獎品名稱$prizename = array( 'third prize', 'second prize', 'first prize',);// 獎品圖片在頁面上的序號,返回給前端需要$prizecode = array( 3, // 三等獎圖片,也可以是6 2, // 二等獎圖片,也可以是7 1, // 一等獎圖片,也可以是4);// 隨機選擇對哪個獎品種類進行抽獎$caterandom = mt_rand(0, $category - 1); // 對之前隨機選擇的獎品種類進行抽獎$random = mt_rand(0, $probability[$caterandom]); if($random == $lucknum){ // 如果抽中,返回獎品名稱和獎品圖片在頁面上的序號 $data = array( $prizename[$caterandom], $prizecode[$caterandom], );// 以json格式返回給前端js echo json_encode($data);}else{ // 未抽中,返回謝謝參與文字和圖片的序號 $data = array( 'Thank you!', 5, ); echo json_encode($data);}?>

六、使用 ajax 與后端通信

前面已經(jīng)說過前端 js 實現(xiàn)轉(zhuǎn)盤轉(zhuǎn)動效果和后端 php 實現(xiàn)獎品抽獎了。但是現(xiàn)在前端還沒法和后端相互通信,下面就來講解前后端通信方法。

我們這里使用 jquery 的 ajax 來實現(xiàn)。這里使用 jquery 的原因是 jquery 在異步提交方面封裝的很好,而直接用 AJAX 非常麻煩。另外使用 jquery 大大簡化了我們的操作,而且不用考慮瀏覽器的差異。

jquery 中 ajax 的一般格式如下所示:

$.ajax({ url: url , type: 'GET', data: data , dataType: dataType, success: success });其中 url 參數(shù)是必需的,規(guī)定把請求發(fā)送到哪個 url。

type 參數(shù)可選,規(guī)定請求方式,默認為 GET。

data 參數(shù)可選,規(guī)定連同請求發(fā)送到服務器的數(shù)據(jù)。我們這里不需要發(fā)送數(shù)據(jù)到后端。

dataType 參數(shù)可選,規(guī)定預期的服務器響應的數(shù)據(jù)類型,默認執(zhí)行智能判斷(xml、json、script 或 html)。

success 參數(shù)可選,規(guī)定請求成功時執(zhí)行的回調(diào)函數(shù)。

了解了 jquery 中的 ajax 后,那我們來實現(xiàn)前端和后端之間的通信。那么什么時候執(zhí)行 ajax 方法呢?

答案是當單擊抽獎按鈕的時候。當單擊按鈕的時候,首先通過 ajax 請求后端獲得這次抽獎的結(jié)果信息,根據(jù)后端返回的信息設置一些初始信息,包括指定需要停在圖片的序號(data 變量)、轉(zhuǎn)盤結(jié)束時彈窗顯示的文字(msg 變量),然后開始調(diào)用 run() 函數(shù)執(zhí)行轉(zhuǎn)盤轉(zhuǎn)動。

由于之前按鈕上綁定的 onclick 事件處理函數(shù)是 run(),那么現(xiàn)在要更換為包含 ajax 請求的函數(shù)了。下面使用一個 start() 函數(shù)封裝 ajax 的相關請求及處理,代碼如下所示:

function start(){ $.ajax({ url: "http://127.0.0.1/index.php", type:"GET", dataType: "json", success: function(d){ msg = d[0]; // 設置轉(zhuǎn)盤結(jié)束時彈窗顯示的文字 data = d[1]; // 設置需要停在圖片的序號 run(); } });}并將按鈕的 onclick 事件處理函數(shù)更改為 start()。

<li class="btn"><img src="btn.jpg" onclick="start();"/></li>包含 js 的完整 html(index.html) 代碼如下所示:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>zhuanpan</title><style type="text/css">div{margin: 100px auto 0px;width:500px;height:250px;border:3px solid black;}li{width:129px; height:59px; border:3px solid #000; float:left; margin:8px 0 0 8px; list-style:none;}.btn{ border:3px solid red;cursor:pointer}.cur{ border:3px solid red;}</style></head><body> <div> <ul> <li id="c1"><img src="img1.jpg" /></li> <li id="c2"><img src="img2.jpg" /></li> <li id="c3"><img src="img3.jpg" /></li> <li id="c8"><img src="img4.jpg" /></li> <li class="btn"><img src="btn.jpg" onclick="start();"/></li> <li id="c4"><img src="img1.jpg" /></li> <li id="c7"><img src="img2.jpg" /></li> <li id="c6"><img src="img3.jpg" /></li> <li id="c5"><img src="img4.jpg" /></li> </ul> </div><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">// 整個轉(zhuǎn)動過程所需的步驟var step = [['c1',0], // 第一個元素特殊設置['c1', 500],['c2', 400],['c3', 300],['c4', 200],['c5', 200],['c6', 200],['c7', 200],['c8', 200],['c1', 100],['c2', 100],['c3', 100],['c4', 100],['c5', 100],['c6', 100],['c7', 100],['c8', 100],['c1', 100],['c2', 100],['c3', 100],['c4', 100],['c5', 100],['c6', 100],['c7', 100],['c8', 100],['c1', 100],['c2', 100],['c3', 100],['c4', 100],['c5', 100],['c6', 100],['c7', 100],['c8', 100],['c1', 100],['c2', 200],['c3', 300],['c4', 400],['c5', 400],['c6', 400],['c7', 400],['c8', 400],['c1', 400],['c2', 400],['c3', 400],['c4', 400],['c5', 400],['c6', 400],['c7', 400],['c8', 400]];// 記錄當前步數(shù),即step數(shù)組的下標var current = 1;// 指定需要停在圖片的序號var data = 5; // 圖片總量(不包括按鈕)var total = 8;// 轉(zhuǎn)盤結(jié)束時彈窗顯示的文字 var msg = '';// 設置樣式和重新設置定時器function run(){ // 刪除之前設置的cur類 $('#'+step[current-1][0]).removeClass('cur'); // 為當前元素設置cur類 $('#'+step[current][0]).addClass('cur'); // 判斷step數(shù)組所有步驟是否已經(jīng)走完 if(step.length - current - 1 + data == total){ alert(msg); window.location.reload(); }else{ // 重新設置定時器 setTimeout('run()', step[current][1]); current++; }}function start(){ $.ajax({ url: "http://127.0.0.1/index.php", type:"GET", dataType: "json", success: function(d){ msg = d[0]; // 轉(zhuǎn)盤結(jié)束時彈窗顯示的文字 data = d[1]; // 指定需要停在圖片的序號 run(); } });}</script></body></html>

七、運行

由于要運行 php 代碼,需要安裝 nginx 服務器。

執(zhí)行下面的命令安裝 nginx:

sudo apt-get install nginx執(zhí)行下面的命令安裝 php:

sudo apt-get updatesudo apt-get install php5-fpm接下來修改 nginx 的配置文件,文件為 /etc/nginx/sites-available/default:

使用vim編輯器sudo vim /etc/nginx/sites-available/default或使用gedit編輯器sudo gedit /etc/nginx/sites-available/default定位到 24 行,修改為 root /home/shiyanlou/zhuanpan。

然后定位到 54 行,刪除注釋符號,59行被注釋。目的是讓 nginx 能執(zhí)行 php 文件。

然后保存退出。

執(zhí)行下面命令啟動 nginx 和 php:

sudo service nginx startsudo service php5-fpm start進入 /home/shiyanlou/zhuanpan 目錄,將上面完整的 html 代碼寫入 index.html 文件,完整的 php 代碼寫入 index.php 文件。由于實驗樓環(huán)境不支持漢字輸入,上面的文字可以拼音或英文代替。

打開瀏覽器,輸入地址:http://127.0.0.1/index.html,點擊抽獎按鈕,轉(zhuǎn)盤轉(zhuǎn)動,然后出現(xiàn)彈窗提示獲獎信息。

至此,我們的轉(zhuǎn)盤抽獎項目已經(jīng)完成。我們使用 javascript 實現(xiàn)了轉(zhuǎn)盤轉(zhuǎn)動效果,使用 php 實現(xiàn)了獎品抽獎。

八、作業(yè)思考

如果要上線使用,還有許多方面需要考慮,比如用戶身份識別,用戶的抽獎機會,用戶的作弊防護,獎品的數(shù)據(jù)庫讀取等。請考慮如何實現(xiàn)。

本課程可以在實驗樓中在線完成,立即【開始實驗】。更多PHP實戰(zhàn)項目:PHP全部 - 課程

注:轉(zhuǎn)載需獲授權,并保留課程地址https://www.shiyanlou.com/courses/268

關鍵詞:實現(xiàn),轉(zhuǎn)盤,使用

74
73
25
news

版權所有? 億企邦 1997-2025 保留一切法律許可權利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關閉