java+js 实现抽奖

最近做了一个比较有趣的小东西，抽奖，记录一下，可能以后会用到。

先上效果图

思路

抽奖的思路非常的简单：

抽奖是一个大的区间，奖品A为a区间，奖品B为b区间，不中奖为C设为c区间。

随机数字在这个大的区间内产生，如果随机数字在a区间内获得奖品A，如果随机数字在c区间则不中奖。

PS

以上逻辑我们 很难控制中奖，引入库存，当随机的数字在中奖区间内，判断库存。

如果库存不为空，则中奖。

中奖之后中奖区间不做更改，通过库存减少来控制中奖。

例：

库存	中奖区间	奖项
10	1-10	一等奖
100	11-111	二等奖
1000	112-1112	不中奖

if ( i >= 1 && i <= 10 && k >= 0) { //掉入中奖区间，并且有库存
    System.out.println('中奖')
}

逻辑

简单的说下整个逻辑：

前端点击开始抽奖，首先判断是否满足抽奖条件，如果满足抽奖条件则向后台发送Ajax请求，后台接收到请求，随机生成数字，判断是否中奖。

#1 生成的数字是否在区间内
#2 是否有库存

向前端返回结果：

#1 中奖的位置
#2 奖品
#3 其他信息

成功反馈：

#1 中奖 
#2 没中奖

#end 抽奖次数、抽奖条件相应减少

失败反馈：

# 服务器繁忙，稍后再试

代码

这个项目用的是花籽抽奖，贴的只是前端代码

<script type="text/javascript">
var lottery={
    index:-1,   //当前转动到哪个位置，起点位置
    count:0,    //总共有多少个位置
    timer:0,    //setTimeout的ID，用clearTimeout清除
    speed:20,   //初始转动速度
    times:0,    //转动次数
    cycle:50,   //转动基本次数：即至少需要转动多少次再进入抽奖环节
    prize:-1,   //中奖位置
    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;
    }
};

//修改花籽数量(每次抽奖减少对应花籽数量)
function changeSeeds(){
    var seeds = $('#seeds').data("time");
    seeds = seeds - seedNum;
    $('#seeds').html(seeds);
    $('#seeds').data('time',seeds);
}

//修改花籽数量
function addSeeds(num){
    var seeds = $('#seeds').data("time");
    seeds = seeds + num;
    $('#seeds').html(seeds);
    $('#seeds').data('time',seeds);
}

function roll(){
    lottery.times += 1;
    lottery.roll();
    if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
        clearTimeout(lottery.timer);
        layer.msg(msg);     
        if(origin==2){
            addSeeds(contentId)
        }
        lottery.prize=-1;
        lottery.times=0;
        click=false;
        //抽奖结束 解锁
        lock = 0;
    }else{
        if (lottery.times<lottery.cycle) {
            lottery.speed -= 10;
        }else if(lottery.times==lottery.cycle) {
            var index = showIndex;
            lottery.prize = index;
            console.log("index: "+index)
        }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;
}
var click=false;
var msg = ""; // 中奖物品
var showIndex = 0;// 中奖位置
var seedNum = '${seedNum!}'; //抽奖消耗的花籽数量
var lock = 0; //锁
var origin = 0;//奖品来源
var contentId = 0;//奖品数量 （前台只处理花籽）

window.onload=function(){
    lottery.init('lottery');
    $("#lottery a").click(function(){  
        // 判断当前花籽数量
        var seeds = $('#seeds').data("time");
        seeds = seeds - seedNum;
        console.log(seeds);

        if(seeds == null || seeds < 0){
        layer.msg("花籽数量不够！", {time: 2000});
        return false;
        }

        if(lock == 1){
            return false;
        }       
        //上锁
        lock = 1;
        //修改花籽数量
        changeSeeds()
        $.ajax({
         url: '/service/luckDraw', // 请求的url
            data: {
                "tt":"tt" //随便穿了个东西看看后台能不能接受
            },
            type: 'post',
            dataType: 'json',
            cache: false,
            success: function(data){
                if(data.result){ //传过来的参数{result:true,rd:{.....}}
                    console.log(data.rd)
                    showIndex = data.rd.id;
                    msg = data.rd.pMsg;
                    origin = data.rd.origin;
                    contentId = data.rd.contentId;  
                }else{
                    layer.msg("服务器繁忙！稍后再试！", {time: 2000});return;
                }
            }
        }); 

        if(click) {
            return false;
        }
        else{
            lottery.speed=100;
            roll();
            click=true;
            return false;
        }

    });
};

加入锁

加入锁，点击开始抽奖加锁，抽奖结束解锁。

防止这一次抽奖没有完成，用户再次点击开始抽奖，又对后台进行了一次Ajax请求。

ps

思路都在，代码有些凌乱。见谅。