jQuery九宫格抽奖功能的实现

var lottery={
    index:-1,    //当前转动到哪个位置,起点位置
    count:0,    //总共有多少个位置
    timer:0,    //setTimeout的ID,用clearTimeout清除
    speed:10,    //初始转动速度
    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 roll(){
    lottery.times += 1;
    lottery.roll();//转动过程调用的是lottery的roll方法,这里是第一次调用初始化
    if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
        clearTimeout(lottery.timer);
//=====添加中奖位置确定后弹窗开始,如不需要则去掉=====//
var prize_name;
var prize_place = lottery.prize;
switch (prize_place)
{
case 0:
   prize_name="30M流量券";
   break;
case 1:
   prize_name="30M流量券";
   break;
case 2:
   prize_name="150M流量券";
   break;
case 3:
   prize_name="10M流量券";
   break;
case 4:
   prize_name="70M流量券";
   break;
case 5:
   prize_name="";
   break;
case 6:
   prize_name="10M流量券";
   break;
case 7:
   prize_name="10M流量券";
   break;
}
if(prize_place==5){
setTimeout(function(){
$(".popup_failure_wrap").css("display","block");
},1000);
}else{
setTimeout(function(){
$(".popup_succeed_wrap").css("display","block");
$(".succeed_prizeCon").html(prize_name);
},1000);
}
//=====添加中奖位置确定后弹窗开始结束,如不需要则去掉=====//
        lottery.times=0;
        click=false;
    }else{
        if (lottery.times<lottery.cycle) {
            lottery.speed -= 10;
        }else if(lottery.times==lottery.cycle) {
            var index = Math.random()*(lottery.count)|0;//中奖物品通过一个随机数生成
            lottery.prize = 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<60) {
            lottery.speed=60;
        };
// console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
        lottery.timer = setTimeout(roll,lottery.speed);//循环调用
    }
    return false;
}

var click=false;


  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
此资源包括抽奖相关所有的配置,中奖概率配置、奖品表、抽奖记录表和通用存储过程算法。 可以指定抽多少次以后在按照正常概率来计算,中奖个数,如果奖品全部被抽完就永远抽不中,中奖率和中奖最大范围有关,数字越大概率越低,反正越高。由于涉及到一些敏感表数据,只提供主要的中奖表,如用户流水账号信息这些表不提供。 规则: --中奖率公式:中奖率 = 奖项数字范围 ÷ 摇奖数字范围 ÷ 中奖数字范围 --1、摇奖数字范围最小值和最大值定义了产生奖项数字的范围。 --2、中奖数字范围是从1到中奖范围的最大值,此范围内产生中奖号码。 /* 比如说,现在有三个选择一等、二等、三等。 可以设置“摇奖数字选项”为 1-30 一等 奖项数字范围1-10 二等 奖项数字范围 11-20 三等 奖项数字范围 21-30 所设置的奖项数字范围必须在 “摇奖数字选项”范围内,而且不得交叉、重叠。 如果我其中一个设置1-12 另外一个设置10-20 那么就重叠了。 而且为了方便调整中奖率,建议把所有的 奖项数字范围全部设置等距离。如现在有十二个选项,那么依次可以设置成为以下: 1-10、11-20、21-30、...、111-120 那么自然 “摇奖数字范围”就是1-120 现在需要调整中奖率的大小,中奖号码不用改了,全部设置成为1. 然后去调整中奖数字范围。 比如说 一等 中奖数字范围 1-30 二等 中奖数字范围 1-20 三等 中奖数字范围 1-10 那么具体这样设置下来,中奖率会有多高呢?算一下便知道。 一等:10/(30*30)=1/90 九十分之一。 二等:10/(30*20)=1/60 六十分之一。 三等:10/(30*10)=1/30 三十分之一。 所以设置的时候就把中奖号码都设置成1,只需要调整中奖数字范围便可。 */
以下是使用jQuery实现九宫格抽奖的示例代码: HTML代码: ```html <div class="lottery"> <ul> <li><a href="#"><img src="img/1.png"></a></li> <li><a href="#"><img src="img/2.png"></a></li> <li><a href="#"><img src="img/3.png"></a></li> <li><a href="#"><img src="img/4.png"></a></li> <li><a href="#"><img src="img/5.png"></a></li> <li><a href="#"><img src="img/6.png"></a></li> <li><a href="#"><img src="img/7.png"></a></li> <li><a href="#"><img src="img/8.png"></a></li> <li><a href="#"><img src="img/9.png"></a></li> </ul> <a href="#" class="btn">开始抽奖</a> </div> ``` CSS代码: ```css .lottery { width: 500px; margin: 0 auto; text-align: center; } .lottery ul { list-style: none; margin: 0; padding: 0; display: inline-block; } .lottery ul li { float: left; margin-right: 10px; } .lottery ul li:last-child { margin-right: 0; } .lottery ul li a { display: block; width: 150px; height: 150px; border: 1px solid #ccc; text-align: center; line-height: 150px; font-size: 24px; color: #333; text-decoration: none; } .lottery ul li a img { max-width: 100%; max-height: 100%; } .lottery .btn { display: inline-block; margin-top: 20px; padding: 10px 20px; font-size: 24px; color: #fff; background-color: #f00; border-radius: 5px; text-decoration: none; } ``` JavaScript代码: ```javascript $(function() { 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 roll() { lottery.times += 1; lottery.roll(); if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) { clearTimeout(lottery.timer); lottery.prize = -1; lottery.times = 0; click = false; } else { if (lottery.times < lottery.cycle) { lottery.speed -= 10; } else if (lottery.times == lottery.cycle) { var index = Math.random() * (lottery.count) | 0; lottery.prize = 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; $(document).ready(function() { lottery.init('lottery'); $(".btn").click(function() { if (click) { return false; } else { lottery.speed = 100; roll(); click = true; return false; } }); }); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值