時間: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)盤抽獎git clone http://git.shiyanlou.com/shiyanlou/zhuanpan
進入下載目錄:cd zhuanpan
<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>
打開瀏覽器,顯示如下: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;}
打開瀏覽器,顯示如下:<!--增加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 元素邊框為紅色。.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>
setTimeout(code,millisec)code:要調(diào)用的函數(shù)后要執(zhí)行的 JavaScript 代碼串。millisec:在執(zhí)行代碼前需等待的毫秒數(shù)。
setTimeout() 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式,并且只執(zhí)行一次。 ...... <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)動順序來的。$('#c1').addClass('cur');
當然,轉(zhuǎn)動過程不光要為該 li 元素增加 cur 類,還需要刪除它前面一步 li 元素的 cur 類。<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ù)組所有步驟是否已經(jīng)走完 if(current == step.length - 1){ alert("over"); window.location.reload(); }
我們是通過上面的代碼來判斷是否結(jié)束的,那么我們可以通過修改上面的代碼實現(xiàn)讓轉(zhuǎn)盤停止到指定的圖片上。 // 判斷是否結(jié)束 if(step.length - current - 1 + 2 == 8){ alert("over"); window.location.reload(); }
其中 8 表示總共圖片數(shù)量(不包括按鈕)。打開瀏覽器,點擊按鈕發(fā)現(xiàn)停在了第二張圖片上了。 var data = 1; // 指定需要停在圖片的序號 var total = 8; // 圖片總量(不包括按鈕) .................. // 判斷是否結(jié)束 if(step.length - current - 1 + data == total){ alert("over"); window.location.reload(); }
至此,轉(zhuǎn)動效果已經(jīng)完成了。$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ù)組元素是對應的。<?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({ url: url , type: 'GET', data: data , dataType: dataType, success: success });
其中 url 參數(shù)是必需的,規(guī)定把請求發(fā)送到哪個 url。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>
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。sudo service nginx startsudo service php5-fpm start
進入 /home/shiyanlou/zhuanpan 目錄,將上面完整的 html 代碼寫入 index.html 文件,完整的 php 代碼寫入 index.php 文件。由于實驗樓環(huán)境不支持漢字輸入,上面的文字可以拼音或英文代替。關鍵詞:實現(xiàn),轉(zhuǎn)盤,使用
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。