《用JavaScript实现幸运大转盘抽奖程序》 一

    前些日子开发了一个抽奖程序，这个程序百分之九十的逻辑使用JavaScript和JQuery写的，瞬间感觉能JS学到极致，也是一种境界，虽然自己继续向这种境界前进。

    首先说一下这抽奖程序的大体逻辑，首先说怎样让转盘转起来，怎样抽中某个奖品，抽中奖品后怎样转盘停在准确位置。是这样子的，当我们点击抽奖的时候，这时候转盘开始转起来，当转够了足够圈数后，我们就利用Ajax触发一个事件，这个事件就是向后台数据库抽去一个奖品，等奖品抽出来后，将奖品的标识与转盘上的图片的标识以对应，然后实现定位。下面是代码。

    1、初始化抽奖程序

window.onload = function () {
            loaded();
            lottery.init('lottery');
            $("#lottery a").click(function () {
                if (click) {
                    return false;
                } else {
                    if (iNow == 0) return
                    lottery.speed = 100;
                    $("#lottery").find(".lottery-unit-" + lottery.index).removeClass("active");
                    lottery.index = -1;
                    roll();
                    click = true;
                    return false;
                }
            });
        };

    2、定义一个对象，这个对象负责给转盘上各个将品附加特效和初始化转盘的一些参数

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");
                if ($(".lottery-unit-" + (index + 1)).find("img").length!=0) {                 
                    index += 1;
                    if (index > count - 1) {
                        index = 0;
                    };
                    $(lottery).find(".lottery-unit-" + index).addClass("active");
                } else {                   
                    index += 1;
                    if (index > count - 1) {
                        index = 0;
                    };
                }
                this.index = index;
                return false;
            },
            stop: function (index) {
                this.prize = index;
                return false;
            }
        };

    3、最后由下一段代码进行逻辑判断，包括抽奖逻辑，以及定位逻辑。  

function roll() {

            lottery.times += 1;
            lottery.roll();
            if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index || $("#lottery img").length==1) {
                clearTimeout(lottery.timer);
                if ($("#lottery img").length == 1) {
                    $.ajax({
                        url: "DrawDetail",
                        data: {向后台传递的参数},
                        type: "get",
                        dataType: "json",
                        success: function (data) {
                            console.log(data)
                            console.log(data.CnName)
                            iNow--;
                            $("#countClass").text('您还有' + iNow + "次抽奖机会!");
                            lottery.prize = data.SortNo;//这就是最终抽到的奖品标识

                        },
                        error: function (error) {
                            console.log(error);
                            if (error) {
                                alert("网络超时，请检查您的网络设置！");
                                location.replace(location.href);
                            }
                        }
                    })

                }
                setTimeout(function () {                
                    var index1 = lottery.prize;                   
			        $("#alert-div").show(500);			     
			        $("#alert-div img").attr("src", $(".lottery-unit-" + index1).attr("imgSrc"));
                	        $("#lottery").find(".lottery-unit-" + index1).html('');
                	        $("#lottery").find(".lottery-unit-" + index1).removeClass("active");
			        $("#lottery").find(".lottery-unit-" + index1).removeClass("lottery-unit-" + index1);

		        },600);

                lottery.times = 0;
                click = false;
            } else {
                
                    if (lottery.times < lottery.cycle) {
                        lottery.speed = 30;
                    } else if (lottery.times == lottery.cycle) {
                        $.ajax({
                            url: "DrawDetail",
                            data: {
                                userId: "f4048590-feec-4c15-990d-2f7693146937",
                                gameId: "FDFCB4C4-0865-4B33-BD31-BACF9B8A7EA7"
                            },
                            type: "get",
                            dataType: "json",
                            success: function (data) {
                                console.log(data)
                                console.log(data.CnName)
                                iNow--;
                                $("#countClass").text('您还有' + iNow + "次抽奖机会!");
                                //获取随机数(奖品个数范围内)
                                // var index = data[0].number;
                                lottery.prize = data.SortNo;

                            },
                            error: function (error) {
                                console.log(error);
                                if (error) {
                                    alert("网络超时，请检查您的网络设置！");
                                    location.replace(location.href);
                                }
                            }
                        })

                    } else {
                        if (lottery.times > lottery.cycle + 10 && (($("#lottery img").length >= 12) || lottery.prize == lottery.index + 1)) {
                            lottery.speed += 50;
                        } else if(lottery.times > lottery.cycle + 10 && ($("#lottery img").length < 12)){
                            lottery.speed += 10;
                        } 

                    }                            
                lottery.timer = setTimeout(roll, lottery.speed);

            }
            return false;
        }

     当程序启动后，转盘的速度靠着setTimeout()这个函数转动起来，将setTimeout()这个函数封装在转动函数roll（）内部，这就实现了递归，使转盘不断转动起来，知道最终确定奖品的位置。