jquery转盘抽奖的研究

先看效果：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>转盘抽奖二</title>
    <style>
        *{margin:0;padding: 0;}
        #lottery{width:570px;height:510px;margin:0px auto;border:4px solid #ba1809;}
        #lottery table{background-color:yellow;}
        #lottery table td{position:relative;width:190px;height:170px;text-align:center;color:#333;font-index:-999}
        #lottery table td img{display:block;width:190px;height:170px;}
        #lottery table td a{width:190px;height:170px;display:block;text-decoration:none;background:url('./img/lottery1.jpg') no-repeat top center;}
        #lottery table td a:hover{background-image:url('./img/lottery2.jpg');}
        #lottery table td.active .mask{display:block;}
        .mask{width:100%;height:100%;position:absolute;left:0;top:0;background-color: rgba(252,211,4,0.5); display:none; }
    </style>
</head>
<body>
<div id="lottery">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td class="lottery-unit lottery-unit-0"><img src="./img/gift0.jpg"><div class="mask"></div></td>
            <td class="lottery-unit lottery-unit-1"><img src="./img/gift1.jpg"><div class="mask"></div></td>
            <td class="lottery-unit lottery-unit-2"><img src="./img/gift2.jpg"><div class="mask"></div></td>
        </tr>
        <tr>
            <td class="lottery-unit lottery-unit-7"><img src="./img/gift7.jpg"><div class="mask"></div></td>
            <td><a href="#"></a></td>
            <td class="lottery-unit lottery-unit-3"><img src="./img/gift3.jpg"><div class="mask"></div></td>
        </tr>
        <tr>
            <td class="lottery-unit lottery-unit-6"><img src="./img/gift6.jpg"><div class="mask"></div></td>
            <td class="lottery-unit lottery-unit-5"><img src="./img/gift5.jpg"><div class="mask"></div></td>
            <td class="lottery-unit lottery-unit-4"><img src="./img/gift4.jpg"><div class="mask"></div></td>
        </tr>
    </table>
</div>
<script src="../js/jquery.1.10.0.js"></script>
<script>
    $(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); //抽奖转盘节点ID
                    $units = $lottery.find(".lottery-unit"); //奖品节点
                    this.obj = $lottery;  //把抽奖转盘节点对象赋值给lottery对象的obj属性
                    this.count = $units.length; //把奖品节点的长度赋值给lottery的count属性
                    $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; //将转动到的位置增加1
                if (index > count - 1) {    //判断如果当前转动到的位置大于奖品节点总长度-1，则让当前转动到的位置重置为0;
                    index = 0;
                };
                $(lottery).find(".lottery-unit-" + index).addClass("active");   //然后给当前转动到的位置添加当前状态
                this.index = index; //把当前转动到的位置赋值给lottery对象的index属性
                return false; //返回false,终止程序
            },
            stop: function (index) {    //停止转动，返回中奖位置
                this.prize = index;
                return false;   //返回false,终止程序
            }
        };

        //定义一个转动的方法roll()
        function roll() {
            lottery.times += 1; //调用lottery对象的times属性并且在每次调用时加1
            lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
            //判断，如果转动次数大于转动基本次数加10（转动多少次后进入抽奖）并且中奖位置等于当前转动的位置的时候
            if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
                clearTimeout(lottery.timer); //清除转动的定时器
                lottery.prize = -1; //重置prize属性为-1
                lottery.times = 0;  //重置转动次数times为0
                click = false;  //重置变量click为false;ps:click变量用来在点击抽奖后不能在点击抽奖按钮，防止造成定时器叠加
            } else {
                //否则，即转动次数times<=转动基本次数时并且中奖位置和当前转动位置不相等的时候

                //判断如果转动次数小于转动基本数的时候
                if (lottery.times < lottery.cycle) {
                    //让转动速度减少10并重新赋值给属性speed
                    lottery.speed -= 10;

                    //否则如果，转动次数等于转动基本数的时候
                } else if (lottery.times == lottery.cycle) {

                    //转动基本数等于转动次数后产生抽奖结果
                    //通过一个随机数生成，把随机数赋值给新声明的变量index
                    var index = Math.random() * (lottery.count) | 0; //中奖物品通过一个随机数生成
                    lottery.prize = index; //把中间物品赋值给lottery对象的prize属性
                } 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;
        lottery.init('lottery');
        $("#lottery a").click(function () {
            if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
                return false;
            } else {
                lottery.speed = 100;
                roll();    //转圈过程不响应click事件，会将click置为false
                click = true; //一次抽奖完成后，设置click为true，可继续抽奖
                return false;
            };
        });
    });
</script>
</body>
</html>