《用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;}

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

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

关于《那些年啊，那些事——一个程序员的奋斗史》——24提到的鼻炎治疗方法
在<那些年啊,那些事--一个程序员的奋斗史>--24中有提到用清水治疗鼻炎的方法,很多朋友在留言或email都有问到这问题,在此一并做个回答. 简单说说norains的鼻炎 ...
《那些年啊，那些事——一个程序员的奋斗史》十四(完结)
125 距离离职交接的一个月时间还剩几天,本来应该是平淡无事的,却没想到最后还是波澜四起.昨天下班前,公司突然停了电.这本是件普通得不能再普通的事情,可没想到过了一会来电了,或许是波峰电压太大,或许是 ...
《那些年啊，那些事——一个程序员的奋斗史》——128 (终章)
周五,如约而至.张文香果然没有被邀请,武总自然也是被排除之列,来的都是平时大家谈得比较来的.几个月不见,小黑和小蓝还是老样子,但精神相比以前是好多了:麦吉则没什么太大的变化,倒是陈莉胖了不少,颇有一番 ...
关于那些年啊，那些事——一个程序员的奋斗史 ——24提到的鼻炎治疗方法
分享一下我老师大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow 在<那些年啊 ...
关于那些年啊那些事一个程序员的奋斗史 24提到的鼻炎治疗方法
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在< ...
《那些年啊，那些事——一个程序员的奋斗史》——79
旧的4.3＇主板是废弃了,新的带CMMB的板子开始了.对于新的板子来说,其实只是在旧的板子上做改动,比如删掉蓝牙模块啊,去掉视频输入啊等:最大的不同,只是根据Telechips的原理图增加CMMB部分 ...
那些年啊，那些事——一个程序员的奋斗史 ——23
分享一下我老师大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow "开会咯 ...
《那些年啊，那些事——一个程序员的奋斗史》——23
"开会咯!"黄华中在研发部嚷了一下,让大家到外面的会议桌去.说起来,自从段伏枥来到这公司以来,已经差不多有好几个月,却连一个会都没有开过,甚至是小一点的内部会议都没有.为什么突然间 ...
《那些年啊，那些事——一个程序员的奋斗史》——117
这段时间段伏枥在折腾.NET Micro Framework的时候,终于体会到什么叫举步维艰了.因为这玩意没有操作系统做支撑,直接是操作硬件,有时候出问题了,根本就不知道是如何引起的. 比如说,在移植 ...
《那些年啊，那些事——一个程序员的奋斗史》——38
自从会见了律师之后,时间又过了一周,期间还是和往常没什么两样,段伏枥依然还是赶最后一班公交,周六还是依然需要加班.不过,经过王健的努力,这板子终究还是跑起来了.不过,这跑起来的概念也就是能够进入Win ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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