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>
技术交流群：821039247
