前些日子开发了一个抽奖程序，这个程序百分之九十的逻辑使用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（）内部，这就实现了递归，使转盘不断转动起来，知道最终确定奖品的位置。