jquery+h5實(shí)現(xiàn)九宮格抽獎特效(前后端代碼)
更新時間：2021年09月10日 11:54:16 作者：武當(dāng)山道士
這篇文章主要為大家詳細(xì)介紹了jquery+h5實(shí)現(xiàn)九宮格抽獎特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
前言：
前端：jq+h5 實(shí)現(xiàn)九宮格動效
后端：thinkphp3.2.3 實(shí)現(xiàn)中獎概率算法
功能：支持讀取數(shù)據(jù)庫預(yù)設(shè)的中獎率及獎品池，中獎率可以自定義，必須是整數(shù)
最終效果如下：
代碼：
choujiang.html代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="武當(dāng)山道士" />
<title>九宮格抽獎轉(zhuǎn)盤</title>
<style type="text/css">
.container{width:100%;height:auto;line-height: 100%;text-align: center;}
#lottery{width:425px;height:425px;margin:auto;background:#e5e5e5;}
#lottery table td{width:142px;height:142px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999;
}
/*#lottery table td a{width:284px;height:284px;line-height:150px;display:block;text-decoration:none;}*/
#lottery table td.active{background-color:#fff333;border-radius: 10px;}
#start {color:white;background:orange;
border-radius: 10px;
height:130px;
line-height: 130px;
width:130px;
margin: auto;
/*margin: 10% 10% 10% 10%;*/
text-align: center;
display: block;
text-decoration: none;
}
#con_prize{display: none;margin-top: 10px;}
#pname{color:red;margin-left: 5px;margin-right: 10px;font-size: 20px;}
.prize{background:#000 ;opacity: 0.5;
height:130px;width: 130px;
border-radius: 5px;margin: auto;line-height: 130px;
text-shadow: 1px 1px 2px;
}
.on{opacity: 1;color:#fff;background: #a5a5d1}
</style>
</head>
<body>
<div class="container">
<div id="lottery">
<table border="0" cellpadding="0" cellspacing="0" style="background:#e3f4a1">
<tr>
<td class="lottery-unit lottery-unit-0"><div class="prize prize-0">安慰獎</div></td>
<td class="lottery-unit lottery-unit-1"><div class="prize prize-1">玩具車</div></td>
<td class="lottery-unit lottery-unit-2"><div class="prize prize-2">自行車</div></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-7"><div class="prize prize-7">奧迪</div></td>
<td ><a href="#" rel="external nofollow" class = "lottery-unit" id="start">開始抽獎</a></td>
<td class="lottery-unit lottery-unit-3"><div class="prize prize-3">電動車</div></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-6"><div class="prize prize-6">夏利</div></td>
<td class="lottery-unit lottery-unit-5"><div class="prize prize-5">拖拉機(jī)</div></td>
<td class="lottery-unit lottery-unit-4"><div class="prize prize-4">摩托</div></td>
</tr>
</table>
</div>
<div id="con_prize" data-pname="長宜太盛100元優(yōu)惠券" data-pid="1">恭喜您獲得獎品：<span id="pname"></span><button onclick="getPrize()">領(lǐng)取獎品</button></div>
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var lottery={
index:-1, //當(dāng)前轉(zhuǎn)動到哪個位置，起點(diǎn)位置
count:8, //總共有多少個獎品位置，9宮格就是8個獎品位置
timer:0, //setTimeout的ID，用clearTimeout清除
speed:10, //初始轉(zhuǎn)動速度
times:0, //轉(zhuǎn)動次數(shù)
cycle:50, //轉(zhuǎn)動基本次數(shù)：即至少需要轉(zhuǎn)動多少次再進(jìn)入抽獎環(huán)節(jié)
prize:0, //默認(rèn)中獎位置，放默認(rèn)獎品
init:function(id){
if ($("#"+id).find(".lottery-unit").length>0) {
$lottery = $("#"+id);
$units = $lottery.find(".lottery-unit");
this.obj = $lottery;
this.count = $units.length;
$lottery.find(".prize-"+this.index).addClass("on");
};
},
roll:function(){
var index = this.index;
var count = this.count;
var lottery = this.obj;
$(lottery).find(".prize-"+index).removeClass("on");
index += 1;
if (index>count-1) {
index = 0;
};
$(lottery).find(".prize-"+index).addClass("on");
this.index=index;
return false;
},
stop:function(index){
this.prize=index;
return false;
}
};
//存儲獎品信息
var prize_data = {
pname:'默認(rèn)獎品', //獎品名稱
pnum:0, //中獎位置 默認(rèn)0，重要，轉(zhuǎn)盤據(jù)此來定位獲獎商品
pid:1, //獎品id 默認(rèn)1
};
function roll(){
lottery.times += 1;
lottery.roll();
if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
clearTimeout(lottery.timer);
lottery.times=0;
click=false;
//顯示中獎信息
showDetail();
}else{
//速度控制
if (lottery.times<lottery.cycle) {
lottery.speed -= 10;
}else if(lottery.times==lottery.cycle) {
index = lottery.prize;
}else{
if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
lottery.speed += 110;
}else{
lottery.speed += 20;
}
}
if (lottery.speed<40) {
lottery.speed=40;
};
//延時遞歸調(diào)用
lottery.timer = setTimeout(roll,lottery.speed);
}
return false;
}
/*
* 獲取中獎位置
* @param {string} name 用戶昵稱（必須）
* @param {string} avatar 微信頭像網(wǎng)址（必須）
* @param {string} openid 微信openid（必須，用于驗(yàn)證唯一性，一個用戶只能抽獎一次）
* @return {bool}
*/
function doRoll(url,name,avatar,openid){
$.ajax({ url: url, data:{name:name,avatar:avatar,openid:openid}, async:false,dataType:'json',success: function(rst){
lottery.speed=100;
var data = rst.data;
lottery.prize = data.pnum;
prize_data = {
pname:data.pname,
pnum:data.pnum,
pid:data.pid
};
roll();
click=true;
return false;
}});
}
//領(lǐng)獎(跳轉(zhuǎn)收貨地址頁面，或者彈出收貨地址頁面)
function getPrize(){
alert("請?zhí)顚懯肇浀刂?);
}
//清空中獎信息
function clearDetail(){
$("#con_prize").hide();
$("#pname").html("");
}
//顯示中獎信息
function showDetail(){
$("#con_prize").show();
$("#pname").html(prize_data.pname);
}
var click=false;
window.function(){
var url = 'http://test.com/api/Shop/ex/';//這里改成實(shí)際后臺抽獎接口
lottery.init('lottery');
$("#start").click(function(){
if (click) {
return false;
}else{
clearDetail();
doRoll(url,"name","avatar","openid");
}
});
};
</script>
</body>
</html>
thinkphp接口代碼如下：
namespace Api\Controller;
use Think\Controller;
class ShopController Extends Controller{
/**
* 抽獎后臺接口
* @author 武當(dāng)山道士
*/
public function ex(){
$nick = I('nick','','trim');
$avatar = I('avatar','','trim');
$openid = I('openid','','trim');
//if(empty($nick)) $this->error('empty nick');
//if(empty($avatar)) $this->error('empty avatar');
//if(empty($openid)) $this->error('empty openid');
/*自己封裝的error函數(shù)，正常應(yīng)該這樣寫：
$this->ajaxReturn(array(
'data'=>'',
'info'=>$info,
'status'=>$status
));*/
//初始化獎品池，8個獎品，滿概率100，最小概率為1(id,name以實(shí)際數(shù)據(jù)庫取出的數(shù)據(jù)為準(zhǔn)，percent之和等于100)
$arr8 = array(
array("id"=>1,"name"=>"安慰獎","percent"=>69),
array("id"=>2,"name"=>"玩具車","percent"=>10),
array("id"=>3,"name"=>"自行車","percent"=>6),
array("id"=>4,"name"=>"電動車","percent"=>5),
array("id"=>5,"name"=>"摩托","percent"=>4),
array("id"=>6,"name"=>"拖拉機(jī)","percent"=>3),
array("id"=>7,"name"=>"夏利","percent"=>2),
array("id"=>8,"name"=>"奧迪","percent"=>1),
);
//下標(biāo)存儲數(shù)組100個下表，0-7 按概率分配對應(yīng)的數(shù)量
$indexArr = array();
for($i=0;$i<sizeof($arr8);$i++){
for($j=0;$j<$arr8[$i]['percent'];$j++){
//index 追加到數(shù)組indexArr
array_push($indexArr, $i);
}
}
//數(shù)組亂序
shuffle($indexArr);
//從下標(biāo)數(shù)組中隨機(jī)取一個下標(biāo)作為中獎下標(biāo)，$rand_index 是$indexArr的隨機(jī)元素的下標(biāo)（0-99）
$rand_index = array_rand($indexArr,1);
//獲取中獎信息
$prize_index = $indexArr[$rand_index];
$prizeInfo = $arr8[$prize_index];
$data['pnum'] = $prize_index;//對應(yīng)前端獎品編號
$data['pid'] = $prizeInfo['id'];
$data['pname'] = $prizeInfo['name'];
$this->success($data);/*自己封裝的success，正常應(yīng)該這樣寫
$this->ajaxReturn(array(
'data'=>$data,
'info'=>'成功',
'status'=>1
));*/
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實(shí)現(xiàn)獲取隱藏div高度的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取隱藏div高度的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery針對頁面元素屬性操作的相關(guān)技巧,需要的朋友可以參考下2017-02-02
最近發(fā)現(xiàn)一個不錯的基于jquery的插件thickBox ，感覺比facebox好用。但因?yàn)閖query官方不推薦使用。所以這個只是學(xué)習(xí)的朋友，不建議使用這個。2010-09-09
jquery實(shí)現(xiàn)動態(tài)改變css樣式的方法分析
這篇文章主要介紹了jquery實(shí)現(xiàn)動態(tài)改變css樣式的方法,結(jié)合實(shí)例形式分析了jQuery動態(tài)操作css樣式的設(shè)置、獲取及應(yīng)用等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
jQuery中使用data()方法讀取HTML5自定義屬性data-*實(shí)例
如果你使用jQuery類庫，那么你可以非常愉悅的使用jquery的data()方法存取data-* 自定義屬性，方法允許我們在DOM元素上綁定任意類型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險2014-04-04
jQuery對象和DOM對象之間相互轉(zhuǎn)換的方法介紹
這篇文章主要介紹了jQuery對象和DOM對象之間相互轉(zhuǎn)換的方法介紹,本文講解了jQuery對象轉(zhuǎn)成DOM對象、DOM對象轉(zhuǎn)換成jQuery對象 方法,需要的朋友可以參考下2015-02-02
jquery實(shí)現(xiàn)當(dāng)滑動到一定位置時固定效果
這篇文章主要介紹了jquery實(shí)現(xiàn)當(dāng)滑動到一定位置時固定效果,需要的朋友可以參考下2014-06-06
bootstrap table 服務(wù)器端分頁例子分享
這篇文章主要介紹了bootstrap table 服務(wù)器端分頁例子分享,需要的朋友可以參考下2015-02-02
jquery.guide.js新版上線操作向?qū)хU空提示jQuery插件(推薦)
這篇文章主要介紹了jquery.guide.js新版上線操作向?qū)хU空提示jQuery插件(推薦),需要的朋友可以參考下2017-05-05
jqGrid可以綁定XML,JSON和數(shù)組三種類型的數(shù)據(jù)。接下來通過本文給大家介紹jqGrid用法的相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
基于jQuery實(shí)現(xiàn)仿QQ空間送禮物功能代碼
qq空間的一份虛擬禮物可能會讓很久不曾相見的朋友拉近一些距離。那么基于jquery代碼是如何實(shí)現(xiàn)此功能的呢？下面腳本之家小編給大家分享基于jQuery實(shí)現(xiàn)仿QQ空間送禮物功能代碼，一起看看吧2016-05-05