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

本文主要是介绍《用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) returnlottery.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;}