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']]; }
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!