欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

PHP+jQuery翻板抽獎功能實現(xiàn)

 更新時間:2015年10月19日 17:28:48   投稿:lijiao  
在電視節(jié)目中有一種抽獎形式暫且叫做翻板抽獎,臺上有一個墻面,墻面放置幾個大方塊,主持人或者抽獎?wù)叻_對應(yīng)的方塊即可揭曉中獎結(jié)果。類似的抽獎形式還可以應(yīng)用在WEB中,本文將使用PHP+jQuery為您講解如何實現(xiàn)翻板抽獎程序。

翻板抽獎的實現(xiàn)流程:前端頁面提供6個方塊,用數(shù)字1-6依次表示6個不同的方塊,當(dāng)抽獎?wù)唿c擊6個方塊中的某一塊時,方塊翻轉(zhuǎn)到背面,顯示抽獎中獎信息??此坪唵蔚囊粋€操作過程,卻包含著WEB技術(shù)的很多知識面,所以本文的讀者應(yīng)該熟練掌握jQuery和PHP相關(guān)知識。

HTML
與本站上篇文章不同的是,翻板抽獎不提供開始和結(jié)束抽獎按鈕,抽獎?wù)咦约簺Q定選取其中的某一個方塊,來完成抽獎的,所以我們在頁面中放置6個方塊,并且用1-6來表示不同的方塊。

<ul id="prize"> 
  <li class="red" title="點擊抽獎">1</li> 
  <li class="green" title="點擊抽獎">2</li> 
  <li class="blue" title="點擊抽獎">3</li> 
  <li class="purple" title="點擊抽獎">4</li> 
  <li class="olive" title="點擊抽獎">5</li> 
  <li class="brown" title="點擊抽獎">6</li> 
</ul> 
<div><a href="#" id="viewother">【翻開其他】</a></div> 
<div id="data"></div> 

html結(jié)構(gòu)中,我們使用一個無序列表放置6個不同的方塊,每個li中的clas屬性表示該方塊的顏色,列表下面是一個鏈接a#viewother,用來完成抽獎后,點擊它,翻看其他方塊背面的中獎信息,默認(rèn)是隱藏的。接下來還有一個div#data,它是空的,作用是用來臨時存儲未抽中的其他獎項數(shù)據(jù),具體情況看后面的代碼。為了讓6個方塊并排看起來舒服點,您還需要用CSS來美化下,具體可參照demo,本文中不再貼出css代碼。
PHP
我們先完成后臺PHP的流程,PHP的主要工作是負(fù)責(zé)配置獎項及對應(yīng)的中獎概率,當(dāng)前端頁面點擊翻動某個方塊時會想后臺PHP發(fā)送ajax請求,那么后臺PHP根據(jù)配置的概率,通過概率算法給出中獎結(jié)果,同時將未中獎的獎項信息一并以JSON數(shù)據(jù)格式發(fā)送給前端頁面。
先來看概率計算函數(shù)

function get_rand($proArr) { 
  $result = ''; 
 
  //概率數(shù)組的總概率精度 
  $proSum = array_sum($proArr); 
 
  //概率數(shù)組循環(huán) 
  foreach ($proArr as $key => $proCur) { 
    $randNum = mt_rand(1, $proSum); 
    if ($randNum <= $proCur) { 
      $result = $key; 
      break; 
    } else { 
      $proSum -= $proCur; 
    } 
  } 
  unset ($proArr); 
 
  return $result; 
} 

上述代碼是一段經(jīng)典的概率算法,$proArr是一個預(yù)先設(shè)置的數(shù)組,假設(shè)數(shù)組為:array(100,200,300,400),開始是從1,1000這個概率范圍內(nèi)篩選第一個數(shù)是否在他的出現(xiàn)概率范圍之內(nèi), 如果不在,則將概率空間,也就是k的值減去剛剛的那個數(shù)字的概率空間,在本例當(dāng)中就是減去100,也就是說第二個數(shù)是在1,900這個范圍內(nèi)篩選的。這樣篩選到最終,總會有一個數(shù)滿足要求。就相當(dāng)于去一個箱子里摸東西,第一個不是,第二個不是,第三個還不是,那最后一個一定是。這個算法簡單,而且效率非常高,關(guān)鍵是這個算法已在我們以前的項目中有應(yīng)用,尤其是大數(shù)據(jù)量的項目中效率非常棒。
接下來我們通過PHP配置獎項。

$prize_arr = array( 
  '0' => array('id'=>1,'prize'=>'平板電腦','v'=>1), 
  '1' => array('id'=>2,'prize'=>'數(shù)碼相機','v'=>5), 
  '2' => array('id'=>3,'prize'=>'音箱設(shè)備','v'=>10), 
  '3' => array('id'=>4,'prize'=>'4G優(yōu)盤','v'=>12), 
  '4' => array('id'=>5,'prize'=>'10Q幣','v'=>22), 
  '5' => array('id'=>6,'prize'=>'下次沒準(zhǔn)就能中哦','v'=>50), 
); 

中是一個二維數(shù)組,記錄了所有本次抽獎的獎項信息,其中id表示中獎等級,prize表示獎品,v表示中獎概率。注意其中的v必須為整數(shù),你可以將對應(yīng)的獎項的v設(shè)置成0,即意味著該獎項抽中的幾率是0,數(shù)組中v的總和(基數(shù)),基數(shù)越大越能體現(xiàn)概率的準(zhǔn)確性。本例中v的總和為100,那么平板電腦對應(yīng)的中獎概率就是1%,如果v的總和是10000,那中獎概率就是萬分之一了。
每次前端頁面的請求,PHP循環(huán)獎項設(shè)置數(shù)組,通過概率計算函數(shù)get_rand獲取抽中的獎項id。將中獎獎品保存在數(shù)組$res['yes']中,而剩下的未中獎的信息保存在$res['no']中,最后輸出json個數(shù)數(shù)據(jù)給前端頁面。

foreach ($prize_arr as $key => $val) { 
  $arr[$val['id']] = $val['v']; 
} 
 
$rid = get_rand($arr); //根據(jù)概率獲取獎項id 
 
$res['yes'] = $prize_arr[$rid-1]['prize']; //中獎項 
unset($prize_arr[$rid-1]); //將中獎項從數(shù)組中剔除,剩下未中獎項 
shuffle($prize_arr); //打亂數(shù)組順序 
for($i=0;$i<count($prize_arr);$i++){ 
  $pr[] = $prize_arr[$i]['prize']; 
} 
$res['no'] = $pr; 
echo json_encode($res); 

直接輸出中獎信息就得了,為何還要把未中獎的信息也要輸出給前端頁面呢?請看后面的前端代碼。
jQuery
首先為了實現(xiàn)翻板效果,我們需要預(yù)先加載翻動插件及jquery,jqueryui相關(guān)插件:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> 
<script type="text/javascript" src="js/jquery.flip.min.js"></script> 

接下來,我們通過單擊頁面中的方塊,來完成抽獎行為。

$(function(){ 
  $("#prize li").each(function(){ 
    var p = $(this); 
    var c = $(this).attr('class'); 
    p.css("background-color",c); 
    p.click(function(){ 
      $("#prize li").unbind('click'); 
      $.getJSON("data.php",function(json){ 
        var prize = json.yes; //抽中的獎項 
        p.flip({ 
          direction:'rl', //翻動的方向rl:right to left 
          content:prize, //翻轉(zhuǎn)后顯示的內(nèi)容即獎品 
          color:c, //背景色 
          onEnd: function(){ //翻轉(zhuǎn)結(jié)束 
            p.css({"font-size":"22px","line-height":"100px"}); 
            p.attr("id","r"); //標(biāo)記中獎方塊的id 
            $("#viewother").show(); //顯示查看其他按鈕 
            $("#prize li").unbind('click') 
            .css("cursor","default").removeAttr("title"); 
          } 
        }); 
        $("#data").data("nolist",json.no); //保存未中獎信息 
      }); 
    }); 
  }); 
}); 

代碼中先遍歷6個方塊,給每個方塊初始化不同的背景顏色,單擊當(dāng)前方塊后,使用$.getJSON向后臺data.php發(fā)送ajax請求,請求成功后,調(diào)用flip插件實現(xiàn)翻轉(zhuǎn)方塊,在獲取的中獎信息顯示在翻轉(zhuǎn)后的方塊上,翻轉(zhuǎn)結(jié)束后,標(biāo)記該中獎方塊id,同時凍結(jié)方塊上的單擊事件,即unbind('click'),目的就是讓抽獎?wù)咧荒艹橐淮?,抽完后每個方塊不能再翻動了。最后將未抽中的獎項信息通過data()儲存在#data中。
其實到這一步抽獎工作已經(jīng)完成,為了能查看其他方塊背面究竟隱藏著什么,我們在抽獎后給出一個可以查看其他方塊背面的鏈接。通過點擊該鏈接,其他5個方塊轉(zhuǎn)動,將背面獎項信息顯示出來。

$(function(){ 
  $("#viewother").click(function(){ 
    var mydata = $("#data").data("nolist"); //獲取數(shù)據(jù) 
    var mydata2 = eval(mydata);//通過eval()函數(shù)可以將JSON轉(zhuǎn)換成數(shù)組 
       
    $("#prize li").not($('#r')[0]).each(function(index){ 
      var pr = $(this); 
      pr.flip({ 
        direction:'bt', 
        color:'lightgrey', 
        content:mydata2[index], //獎品信息(未抽中) 
        onEnd:function(){ 
          pr.css({"font-size":"22px","line-height":"100px","color":"#333"}); 
          $("#viewother").hide(); 
        } 
      }); 
    }); 
    $("#data").removeData("nolist"); 
  }); 
}); 

當(dāng)單擊#viewother時,獲取抽獎時保存的未抽中的獎項數(shù)據(jù),并將其轉(zhuǎn)化為數(shù)組,翻轉(zhuǎn)5個方塊,將獎品信息顯示在對應(yīng)的方塊中。最終效果圖:

我想看完這篇文章后,大家或許就會知道電視節(jié)目中的翻板抽獎貓膩了,可能再不會參與了。

總之,希望大家可以從小編整理的這篇文章中有所收獲,對大家學(xué)習(xí)php編程有所幫助。

相關(guān)文章

  • Yii框架 session 數(shù)據(jù)庫存儲操作方法示例

    Yii框架 session 數(shù)據(jù)庫存儲操作方法示例

    這篇文章主要介紹了Yii框架 session 數(shù)據(jù)庫存儲操作方法,結(jié)合實例形式分析了使用Yii框架session組件配置與數(shù)據(jù)庫存儲相關(guān)操作技巧,需要的朋友可以參考下
    2019-11-11
  • ThinkPHP 3.2.2實現(xiàn)事務(wù)操作的方法

    ThinkPHP 3.2.2實現(xiàn)事務(wù)操作的方法

    這篇文章主要介紹了ThinkPHP 3.2.2實現(xiàn)事務(wù)操作的方法,簡單分析了thinkPHP中事務(wù)的啟動、提交、回滾等操作方法并給出了完整的事務(wù)提交與回滾操作實例,需要的朋友可以參考下
    2017-05-05
  • 解決在laravel中auth建立時候遇到的問題

    解決在laravel中auth建立時候遇到的問題

    今天小編就為大家分享一篇解決在laravel中auth建立時候遇到的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • THINKPHP5分頁數(shù)據(jù)對象處理過程解析

    THINKPHP5分頁數(shù)據(jù)對象處理過程解析

    這篇文章主要介紹了THINKPHP5分頁數(shù)據(jù)對象處理過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-10-10
  • PHP中快速生成隨機密碼的幾種方式

    PHP中快速生成隨機密碼的幾種方式

    本篇文章主要介紹了PHP中快速生成隨機密碼的幾種方式,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • ThinkPHP中使用Ueditor富文本編輯器

    ThinkPHP中使用Ueditor富文本編輯器

    這篇文章主要介紹了ThinkPHP中使用Ueditor富文本編輯器,需要的朋友可以參考下
    2015-09-09
  • PHP兩種快速排序算法實例

    PHP兩種快速排序算法實例

    這篇文章主要介紹了PHP兩種快速排序算法實例,本文直接給出實現(xiàn)代碼,分別使用遞歸法、迭代法實現(xiàn),需要的朋友可以參考下
    2015-02-02
  • ThinkPHP獨立分組使用的注意事項

    ThinkPHP獨立分組使用的注意事項

    這篇文章主要介紹了ThinkPHP獨立分組使用的注意事項,針對獨立分組的目錄結(jié)構(gòu)與分組之間的相互調(diào)用進(jìn)行了較為深入的分析,并指出了使用時的注意事項,需要的朋友可以參考下
    2014-11-11
  • php-fpm重啟導(dǎo)致的程序執(zhí)行中斷問題詳解

    php-fpm重啟導(dǎo)致的程序執(zhí)行中斷問題詳解

    這篇文章主要給大家介紹了關(guān)于php-fpm重啟導(dǎo)致的程序執(zhí)行中斷問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • Laravel 5使用Laravel Excel實現(xiàn)Excel/CSV文件導(dǎo)入導(dǎo)出的功能詳解

    Laravel 5使用Laravel Excel實現(xiàn)Excel/CSV文件導(dǎo)入導(dǎo)出的功能詳解

    這篇文章主要給大家介紹了關(guān)于在Laravel 5中如何使用Laravel Excel實現(xiàn)Excel/CSV文件導(dǎo)入導(dǎo)出功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下。
    2017-10-10

最新評論