九宫格抽奖程序

本文由清尘发表于2017-01-22 11:51最后修改于2017-07-26属于javascript移动前端分类

查看演示

HTML:

<ul class="lottery_box over" id="lottery">
	<li class="lottery-unit lottery-unit-0"><img class="pd" src="wxucimg/g_1.png"><img class="mask_lt" src="wxucimg/mask_lt.png"></li>
	<li class="lottery-unit lottery-unit-1"><img class="pd2" src="wxucimg/d1_ico.png"><span class="desc">500积分</span><img class="mask_lt" src="wxucimg/mask_lt.png"></li>
	<li class="lottery-unit lottery-unit-2"><img class="pd" src="wxucimg/g_2.png"><img class="mask_lt" src="wxucimg/mask_lt.png"></li>
	<li class="lottery-unit lottery-unit-7"><img class="pd2" src="wxucimg/d2_ico.png"><span class="desc">趣豆10个</span><img class="mask_lt" src="wxucimg/mask_lt.png"></li>
	<li class="g_start"></li>
	<li class="lottery-unit lottery-unit-3"><img class="pd2" src="wxucimg/d2_ico.png"><span class="desc">趣豆10个</span><img class="mask_lt" src="wxucimg/mask_lt.png"></li>
	<li class="lottery-unit lottery-unit-6"><img class="pd" src="wxucimg/g_4.png"><img class="mask_lt" src="wxucimg/mask_lt.png"></li>
	<li class="lottery-unit lottery-unit-5"><img class="pd2" src="wxucimg/d1_ico.png"><span class="desc">500积分</span><img class="mask_lt" src="wxucimg/mask_lt.png"></li>
	<li class="lottery-unit lottery-unit-4"><img class="pd" src="wxucimg/g_3.png"><img class="mask_lt" src="wxucimg/mask_lt.png"></li>
</ul>

JS代码:

var lottery = {
                index: 0, //当前转动到哪个位置,起点位置
                count: 0, //总共有多少个位置
                timer: 0, //setTimeout的ID,用clearTimeout清除
                speed: 20, //初始转动速度
                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(".lottery-unit-" + this.index).addClass("active");
                    }
                },
                roll: function() {
                    var index = this.index;
                    var count = this.count;
                    var lottery = this.obj;
                    $(lottery).find(".lottery-unit-" + index).removeClass("active");
                    index += 1;
                    if (index > count - 1) {
                        index = 0;
                    }
                    $(lottery).find(".lottery-unit-" + index).addClass("active");
                    this.index = index;
                    return false;
                },
                stop: function(index) {
                    this.prize = index;
                    return false;
                }
            };

点击“开始抽奖”按钮,并且远程ajax.php获取奖项:

$(function() { 
    lottery.init('lottery'); 
    $("#lottery a").click(function() { 
        if (click) { 
            return false; 
        } else { 
            lottery.speed = 100; 
            $.post("ajax.php", { 
                uid: 1 
            }, 
            function(data) { //获取奖品,也可以在这里判断是否登陆状态 
                $("#lottery").attr("prize_site", data.prize_site); 
                $("#lottery").attr("prize_id", data.prize_id); 
                $("#lottery").attr("prize_name", data.prize_name); 
                roll(); 
                click = true; 
                return false; 
            }, 
            "json") 
        } 
    }); 
})

Ajax.php
12个奖品数组如下,其中prize表示奖项内容,v表示中奖几率(若数组中七个奖项的v的总和为100,如果v的值为1,则代表中奖几率为1%,依此类推)

$prize_arr = array( 
    '0' => array('id' => 1, 'prize' => '一等奖', 'v' => 5), 
    '1' => array('id' => 2, 'prize' => '二等奖', 'v' => 5), 
    '2' => array('id' => 3, 'prize' => '三等奖', 'v' => 5), 
    '3' => array('id' => 4, 'prize' => '四等奖', 'v' => 5), 
    '4' => array('id' => 5, 'prize' => '五等奖', 'v' => 5), 
    '5' => array('id' => 6, 'prize' => '六等奖', 'v' => 5), 
    '6' => array('id' => 7, 'prize' => '七等奖', 'v' => 5), 
    '7' => array('id' => 8, 'prize' => '八等奖', 'v' => 5), 
    '8' => array('id' => 9, 'prize' => '九等奖', 'v' => 5), 
    '9' => array('id' => 10, 'prize' => '十等奖', 'v' => 5), 
    '10' => array('id' => 11, 'prize' => '十一等奖', 'v' => 25), 
    '11' => array('id' => 12, 'prize' => '十二等奖', 'v' => 25), 
);

获取随机奖品:

foreach ($prize_arr as $k=>$v) { 
    $arr[$v['id']] = $v['v']; 
 
} 
 
$prize_id = getRand($arr); //根据概率获取奖项id  
foreach($prize_arr as $k=>$v){ //获取前端奖项位置 
    if($v['id'] == $prize_id){ 
     $prize_site = $k; 
     break; 
    } 
} 
$res = $prize_arr[$prize_id - 1]; //中奖项  
 
$data['prize_name'] = $res['prize']; 
$data['prize_site'] = $prize_site;//前端奖项从-1开始 
echo json_encode($data);