h5幸运大转盘抽奖活动html模板
以下是前端js代码：
$(function () {
// var tips = ["500M流量", "1G流量", "50元话费", "20元话费", "300M流量","谢谢参与~"],//中奖提示
var $ring = $(".ring"),
$prize = $(".prize"),//转盘
$btn = $("#btn"),//按钮
$change = $("#change"),//显示剩余抽奖机会
$li = $(".scroll li"),//中奖信息滚动的盒子
$sNum = $(".start-num"),//手机头号，三位数
$eNum = $(".end-num"),//手机尾号，四位数
$info = $(".info"),//中奖提示信息
data = {count: 10},//次数
bool = false,//判断是否在旋转，true表示是，false表示否
timer;//定时器
init();
function init() {
timer = setInterval(function () {
$ring.toggleClass("light");
}, 1000);
}
//点击抽奖
$btn.click(function () {
if (bool) return; // 如果在执行就退出
bool = true; // 标志为 在执行
// if (data.count <= 0) { //当抽奖次数为0时
// $change.html(0);//次数显示为0
// bool = false;
// alert("没有次数了");
// } else { //还有次数就执行
// data.count--;
// data.count <= 0 && (data.count = 0);
// $change.html(data.count);//显示剩余次数
// $prize.removeClass("running");
// //clickFn();
// ajax_lottery()
// }
$prize.removeClass("running");
//clickFn();
ajax_lottery()
});
function ajax_lottery() {
var uid = queryString('uid');
var token = queryString('token');
$.ajax({
url: '/home/lottery/ajax_lottery',
type: 'POST',
dataType: 'json',
data: {uid: uid,token:token},
success:function(res)
{
if(res.code==0)
{
rotateFn(res.data.angle, res.data.prize)
//clickFn();
}
else
{
$('#change').text(res.msg)
$('.error_text').text(res.msg)
$("#mask2").show();
$(".winning").addClass("reback");
setTimeout(function () {
$("#card").addClass("pull");
}, 500);
//关闭弹出层
$("#close,.win,.btn").click(function () {
//$close.click(function () {
$("#mask").hide();
$("#mask2").hide();
$(".winning").removeClass("reback");
$("#card").removeClass("pull");
});
bool = false;
}
}
});
}
//随机概率
function clickFn() {
var data = [1, 2, 3, 4, 5, 6];//抽奖概率
//data为随机出来的结果，根据概率后的结果
data = data[Math.floor(Math.random() * data.length)];//1-6的随机数
switch (data) {//中奖概率，可控。根据得到的随机数控制奖品
case 1:
rotateFn(0, tips[0]);
break;
case 2:
rotateFn(60, tips[5]);
break;
case 3:
rotateFn(180, tips[4]);
break;
case 4:
rotateFn(120, tips[1]);
break;
case 5:
rotateFn(-60, tips[2]);
break;
case 6:
rotateFn(-120, tips[3]);
break;
}
}
//选中函数。参数：奖品序号、角度、提示文字
function rotateFn(angle, text) {
/*手机号的处理
var arr = [13477735912, 13100656035, 15926909285];
var a = arr[0] + "";
var f = a.substr(0, 3);
var l = a.substr(7, 4);*/
bool = true;
$prize.stopRotate();
$prize.rotate({
angle: 0,//旋转的角度数
duration: 4000, //旋转时间
animateTo: angle + 1440, //给定的角度,让它根据得出来的结果加上1440度旋转。也就是至少转4圈
callback: function () {
bool = false; // 标志为 执行完毕
win(text);
$('#change').text('请30分钟后再来')
//show(1, 1, text);
}
});
}
//中奖信息滚动。前两个参数为手机号前三位和后四位手机尾号，text为中的什么奖品
function show(sNum, eNum, text) {
//最新中奖信息
$sNum.eq(2).html(sNum);
$eNum.eq(2).html(eNum);
$info.eq(2).html(text);
$li.css("top", "-" + 40 / 75 + "rem");//滚动
//滚动之后的处理
setTimeout(function () {
$li.css({
"top": "0",
"transition": "all 0s ease-in-out"
});
//更新中奖信息
$sNum.eq(0).html($sNum.eq(1).html());
$eNum.eq(0).html($eNum.eq(1).html());
$info.eq(0).html($info.eq(1).html());
$info.eq(1).html($info.eq(2).html());
$sNum.eq(1).html($sNum.eq(2).html());
$eNum.eq(1).html($eNum.eq(2).html());
}, 500);
$li.css("transition", "all 0.5s ease-in-out");
}
//中奖信息提示
$("#close,.win,.btn").click(function () {
$prize.addClass("running");
init();
});
});后端接口：/home/lottery/ajax_lottery
public function ajax_lottery()
{
if (request()->isPost()) {
$uid = I('uid','');
$token = I('token','');
if($uid==''||$token=='')
{
exit(json_encode(['code'=>1010,'msg'=>'uid或token错误']));
}
$user = Db::name('users')->where(['id'=>$uid,'token'=>$token])->find();
if(!user)
{
exit(json_encode(['code'=>1010,'msg'=>'用户不存在']));
}
else
{
$last_lottery= Db::name('lottery_log')->where('uid',$uid)->order('add_time desc')->find();
$time = time();
//没有抽过奖
if(empty($last_lottery))
{
$lottery = self::lottey();
//抽奖
if($lottery)
{
//http://shop.scarecrowabi.com:81/home/lottery/show?uid=12850&token=7d5445eb642ba6d8eda2fe6cf0fb7b6b
if($lottery['jifen']!=='谢谢参与'&&$lottery['jifen']!==0)
{
$data = [
'add_time' => time(),
'uid'=> $uid,
'type'=>'转盘',
'prize_name'=> $lottery['prize'],
'jifen'=>$lottery['jifen'],
'total_jifen'=>$last_lottery['total_jifen']+$lottery['jifen']
];
Db::name('lottery_log')->insert($data);
}
exit(json_encode(['code'=>0,'data'=>$lottery]));
}
}
else
{
$lottery_config = Db::name('lottery_config')->find("1");
$timediff = $time - $last_lottery['add_time'];
$timediff_min = intval($timediff/60);
if($timediff_min>$lottery_config['time'])
{
$lottery = self::lottey();
//抽奖
if($lottery)
{
//http://shop.scarecrowabi.com:81/home/lottery/show?uid=12850&token=7d5445eb642ba6d8eda2fe6cf0fb7b6b
$data = [
'add_time' => time(),
'uid'=> $uid,
'type'=>'转盘',
'prize_name'=> $lottery['prize'],
'jifen'=>$lottery['jifen'],
'total_jifen'=>$last_lottery['total_jifen']+$lottery['jifen']
];
if($lottery['jifen']=='谢谢参与'||$lottery['jifen']==0)
{
$data['jifen'] = 0;
$data['total_jifen'] = $last_lottery['total_jifen'];
}
Db::name('lottery_log')->insert($data);
exit(json_encode(['code'=>0,'data'=>$lottery]));
}
}
else
{
exit(json_encode(['code'=>1010,'msg'=>'请'.($lottery_config['time']-$timediff_min).'分钟后再来']));
}
}
}
}
}
/*
* 经典的概率算法，
* $proArr是一个预先设置的数组，
* 假设数组为：array(100,200,300，400)，
* 开始是从1,1000 这个概率范围内筛选第一个数是否在他的出现概率范围之内，
* 如果不在，则将概率空间，也就是k的值减去刚刚的那个数字的概率空间，
* 在本例当中就是减去100，也就是说第二个数是在1，900这个范围内筛选的。
* 这样 筛选到最终，总会有一个数满足要求。
* 就相当于去一个箱子里摸东西，
* 第一个不是，第二个不是，第三个还不是，那最后一个一定是。
* 这个算法简单，而且效率非常高，
* 这个算法在大数据量的项目中效率非常棒。
*/
public function get_rand($proArr) {
$result = '';
//概率数组的总概率精度
$proSum = array_sum($proArr);
//概率数组循环
foreach ($proArr as $key => $proCur) {
$randNum = mt_rand(1, $proSum);
if ($randNum <= $proCur) {
$result = $key;
break;
} else {
$proSum -= $proCur;
}
}
unset ($proArr);
return $result;
}
public function lottey()
{
$info = Db::name('lottery_config')->find("1");
$prize = json_decode($info['more'],true);
$prize_arr = [];
$angle = 0;//角度
foreach ($prize as $k=>$v)
{
switch ($k)
{
case 0:
$angle = 0;
break;
case 1:
$angle = -60;
break;
case 2:
$angle = -120;
break;
case 3:
$angle = 180;
break;
case 4:
$angle = 120;
break;
case 5:
$angle = 60;
break;
}
$prize_arr[] =
[
'id' => $k+1,
'prize' => $v['prize_name'],
'v' => $v['prize_rate'],
'angle' => $angle,
'jifen' => intval($v['jifen'])
];
}
//print_r($prize_arr);die;
/*
* 奖项数组
* 是一个二维数组，记录了所有本次抽奖的奖项信息，
* 其中id表示中奖等级，prize表示奖品，v表示中奖概率。
* 注意其中的v必须为整数，你可以将对应的 奖项的v设置成0，即意味着该奖项抽中的几率是0，
* 数组中v的总和（基数），基数越大越能体现概率的准确性。
* 本例中v的总和为100，那么平板电脑对应的 中奖概率就是1%，
* 如果v的总和是10000，那中奖概率就是万分之一了。
*
*/
// $prize_arr = array(
// '0' => array('id'=>1,'prize'=>'平板电脑','v'=>1),
// '1' => array('id'=>2,'prize'=>'数码相机','v'=>5),
// '2' => array('id'=>3,'prize'=>'音箱设备','v'=>10),
// '3' => array('id'=>4,'prize'=>'4G优盘','v'=>12),
// '4' => array('id'=>5,'prize'=>'10Q币','v'=>22),
// '5' => array('id'=>6,'prize'=>'谢谢参与','v'=>50)
// );
/*
* 每次前端页面的请求，PHP循环奖项设置数组，
* 通过概率计算函数get_rand获取抽中的奖项id。
* 将中奖奖品保存在数组$res['yes']中，
* 而剩下的未中奖的信息保存在$res['no']中，
* 最后输出json个数数据给前端页面。
*/
foreach ($prize_arr as $key => $val) {
$arr[$val['id']] = $val['v'];
}
$rid = self::get_rand($arr); //根据概率获取奖项id
$res['yes'] = $prize_arr[$rid-1]['prize']; //中奖项
$res['yes_angle'] = $prize_arr[$rid-1]['angle']; //中奖项
$res['jifen'] = $prize_arr[$rid-1]['jifen']; //中奖项
unset($prize_arr[$rid-1]); //将中奖项从数组中剔除，剩下未中奖项
shuffle($prize_arr); //打乱数组顺序
for($i=0;$i<count($prize_arr);$i++){
$pr[] = $prize_arr[$i]['prize'];
}
$res['no'] = $pr;
//print_r($res);
return ['prize'=>$res['yes'],'angle'=>$res['yes_angle'],'jifen'=>$res['jifen']];
}
![MBTI 16型人格职业性格测试源码PC+H5自适应完整版基于ThinkPHP框架[亲测可用]](https://www.icbot.net/upload/portal/20250429/32ccad646f32a5f4926b3b7b5ef3232a.png)
