DouPHP+Ajax实现九宫格抽奖
前端：jq+h5 实现九宫格动效
后端：thinkphp3.2.3 实现中奖概率算法
功能：支持读取数据库预设的中奖率及奖品池，中奖率可以自定义，必须是整数
前段页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
<title>用户中心title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta name="keywords" content="{$keywords}" />
<meta name="description" content="{$description}" />
<script src="images/jquery-1.12.4.min.js">script>
<link rel="stylesheet" href="images/layui/css/layui.css">
<script type="text/javascript" src="images/layui/layui.all.js">script>
<style type="text/css">
{literal}
.container{width:100%;height:auto;line-height: 100%;text-align: center;}
#lottery{width:100%;height:355px;margin:auto;}
table{
width:80%;
margin: 10px auto;
}
#lottery table td{width:33%;height:115px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999; padding: 2px;
}
/*#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:110px;
line-height: 113px;
width:110px;
box-shadow: 2px 2px 5px #777373;
margin: 4px auto;
/*margin: 10% 10% 10% 10%;*/
text-align: center;
display: block;
text-decoration: none;
}
#con_prize{display: none;margin-top: 10px;color:white}
#pname{color:red;margin-left: 5px;margin-right: 10px;font-size: 20px;}
.prize{
color:red;
font-weight: 900;
background:url('/images/bin.png') 80% no-repeat;
background-size: 100%;
height:110px;width: 110px;
border-radius: 5px;
margin: auto;
line-height: 113px;
}
.on{opacity: 1;color:#fff;background: rgb(3, 169, 244)}
{/literal}
style>
head>
<body>
<div id="wrapper" style="background: url('/images/bg.jpg');">
<img src="/images/top.png" style="width:100%">
<div id="con_prize" data-pname="" data-pid="1">恭喜您获得：<span id="pname">span>div>
<div class="container">
<div id="lottery">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="lottery-unit lottery-unit-0"><div class="prize prize-0">{$zero}金币div>td>
<td class="lottery-unit lottery-unit-1"><div class="prize prize-1">{$one}金币div>td>
<td class="lottery-unit lottery-unit-2"><div class="prize prize-2">{$two}金币div>td>
tr>
<tr>
<td class="lottery-unit lottery-unit-7"><div class="prize prize-7">{$seven}金币div>td>
<td ><a href="#" class = "lottery-unit" id="start">签到抽奖a>td>
<td class="lottery-unit lottery-unit-3"><div class="prize prize-3">{$three}金币div>td>
tr>
<tr>
<td class="lottery-unit lottery-unit-6"><div class="prize prize-6">{$six}金币div>td>
<td class="lottery-unit lottery-unit-5"><div class="prize prize-5">{$five}金币div>td>
<td class="lottery-unit lottery-unit-4"><div class="prize prize-4">{$four}金币div>td>
tr>
table>
div>
div>
<div style="width:88%;border:1px dashed white;margin: 10px auto;padding:3px;color:white;text-align:center;">
<span style="color:white">《 金币兑换规则 》span>
<div style="text-align: left;">
{$account}
div>
div>
<script type="text/javascript">
{literal}
var lottery={
index:-1, //当前转动到哪个位置，起点位置
count:8, //总共有多少个奖品位置，9宫格就是8个奖品位置
timer:0, //setTimeout的ID，用clearTimeout清除
speed:10, //初始转动速度
times:0, //转动次数
cycle:50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
prize:0, //默认中奖位置，放默认奖品
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:'默认奖品', //奖品名称
pnum:0, //中奖位置 默认0，重要，转盘据此来定位获奖商品
pid:1, //奖品id 默认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.times10 ;
}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;
};
//延时递归调用
lottery.timer = setTimeout(roll,lottery.speed);
}
return false;
}
/*
* 获取中奖位置
* @param {string} name 用户昵称（必须）
* @param {string} avatar 微信头像网址（必须）
* @param {string} openid 微信openid（必须，用于验证唯一性，一个用户只能抽奖一次）
* @return {bool}
*/
function doRoll(url,name,avatar,openid){
$.ajax({
url: url,
data:{name:name,avatar:avatar,openid:openid},
contentType:"application/json; charset=utf-8",
dataType: "json",
success: function(rst){
console.log(rst);
if(rst == 7){
layer.alert('活动已结束', {icon: 5});
return;
}
if(rst == 6){
layer.alert('今天已经抽过奖了，明天再来吧', {icon: 5});
return;
}
lottery.speed=100;
lottery.prize = rst.pnum;
prize_data = {
pname:rst.pname,
pnum:rst.pnum,
pid:rst.pid
};
saveprize_jf(prize_data);
roll();
click=true;
return false;
}});
}
//领奖(跳转收货地址页面，或者弹出收货地址页面)
function getPrize(){
alert("请填写收货地址");
}
//清空中奖信息
function clearDetail(){
$("#con_prize").hide();
$("#pname").html("");
}
//显示中奖信息
function showDetail(){
$("#con_prize").show();
$("#pname").html(prize_data.pname);
}
function saveprize_jf(){
$.ajax({
type: "GET",
url: "/prizedraw.php?rec=upprizejf",
data: {prizeid:prize_data.pid},
dataType: "json",
success: function(data){
console.log(data);
}
});
}
var click=false;
window.onload=function(){
var url = '/prizedraw.php?rec=prizedraw';//这里改成实际后台抽奖接口
lottery.init('lottery');
$("#start").click(function(){
if (click) {
return false;
}else{
clearDetail();
doRoll(url,"name","avatar","openid");
}
});
};
{/literal}
script>
div>
{include file="inc/footer2.tpl"}
body>
html>控制器层
if($rec == "prizedraw"){
//活动是否结束
$is_prize = $dou->select($dou->table('config'), '*', '`name` = \'is_prize\'');
$switch = $dou->fetch_array($is_prize);
if($switch['value'] != 1){
$data = 7;
echo json_encode($data);
exit;
}
//判断用户今天是否有抽奖机会
if($_SESSION['user_name']){
$sess = $_SESSION['user_name'];
$queryf = $dou->select($dou->table('user'), '*', "`user_name` = '$sess'");
$user = $dou->fetch_array($queryf);
$today = strtotime('today');
if($user['sign_in'] < $today){
$sql = "UPDATE " . $dou->table('user') . " SET sign_in = '$today' WHERE user_name = '$_SESSION[user_name]'";
$dou->query($sql);
}else{
$data = 6;
echo json_encode($data);
exit;
}
}
$queryf = $dou->select($dou->table('config'), '*', '`name` = \'prize_value\'');
$config = $dou->fetch_array($queryf);
$prize_res = explode(PHP_EOL,$config['value']);
$zero = explode('=',$prize_res['0']);
$one = explode('=',$prize_res['1']);
$two = explode('=',$prize_res['2']);
$three = explode('=',$prize_res['3']);
$four = explode('=',$prize_res['4']);
$five = explode('=',$prize_res['5']);
$six = explode('=',$prize_res['6']);
$seven = explode('=',$prize_res['7']);
// $nick = $_GET('nick');
// $avatar = $_GET('avatar');
// $openid = $_GET('openid');
//if(empty($nick)) $this->error('empty nick');
//if(empty($avatar)) $this->error('empty avatar');
//if(empty($openid)) $this->error('empty openid');
/*自己封装的error函数，正常应该这样写：
$this->ajaxReturn(array(
'data'=>'',
'info'=>$info,
'status'=>$status
));*/
//初始化奖品池，8个奖品，满概率100，最小概率为1(id,name以实际数据库取出的数据为准，percent之和等于100)
$arr8 = array(
array("id"=>1,"name"=>"$zero[0]金币","percent"=>$zero[1]),
array("id"=>2,"name"=>"$one[0]金币","percent"=>$one[1]),
array("id"=>3,"name"=>"$two[0]金币","percent"=>$two[1]),
array("id"=>4,"name"=>"$three[0]金币","percent"=>$three[1]),
array("id"=>5,"name"=>"$four[0]金币","percent"=>$four[1]),
array("id"=>6,"name"=>"$five[0]金币","percent"=>$five[1]),
array("id"=>7,"name"=>"$six[0]金币","percent"=>$six[1]),
array("id"=>8,"name"=>"$seven[0]金币","percent"=>$seven[1]),
);
//下标存储数组100个下表，0-7 按概率分配对应的数量
$indexArr = array();
for($i=0;$i$arr8);$i++){
for($j=0;$j<$arr8[$i]['percent'];$j++){
//index 追加到数组indexArr
array_push($indexArr, $i);
}
}
//数组乱序
shuffle($indexArr);
//从下标数组中随机取一个下标作为中奖下标，$rand_index 是$indexArr的随机元素的下标（0-99）
$rand_index = array_rand($indexArr,1);
//获取中奖信息
$prize_index = $indexArr[$rand_index];
$prizeInfo = $arr8[$prize_index];
$data['pnum'] = $prize_index;//对应前端奖品编号
$data['pid'] = $prizeInfo['id'];
$data['pname'] = $prizeInfo['name'];
echo json_encode($data);
// $this->success($data);
/*自己封装的success，正常应该这样写
$this->ajaxReturn(array(
'data'=>$data,
'info'=>'成功',
'status'=>1
));*/
}elseif($rec == 'upprizejf'){
$id = $_GET['prizeid'] - 1;
$queryf = $dou->select($dou->table('config'), '*', '`name` = \'prize_value\'');
$config = $dou->fetch_array($queryf);
$prize_res = explode(PHP_EOL,$config['value']);
$jifen = explode('=',$prize_res[$id]);
//查询积分
$queryf = $dou->select($dou->table('user'), '*', "`user_name` = '$_SESSION[user_name]'");
$user = $dou->fetch_array($queryf);
//总积分
$account_prize = $jifen[0] + $user['prize_jf'];
//修改签到积分
$sql = "UPDATE " . $dou->table('user') . " SET prize_jf = '$account_prize' WHERE user_name = '$_SESSION[user_name]'";
$dou->query($sql);
}