大转盘
最近写的一个大转盘的页面,感觉还挺有趣的。在写之前也是百度找相关资料,然后整合成自己喜欢的样子。
下面是代码部分:
1 <div class="num-box" id="lottery"> 2 <table> 3 <tr> 4 <td class="box active lottery-unit lottery-unit-0"> 5 <a href="javascript:;"> 6 <img src="img/fee.png" alt="" /> 7 </a> 8 </td> 9 <td class="box lottery-unit lottery-unit-1"> 10 <a href="javascript:;"> 11 <font class="num">50</font> 12 <p class="inner-text">积分</p> 13 </a> 14 </td> 15 <td class="box lottery-unit lottery-unit-2"> 16 <a href="javascript:;"> 17 <font class="num">8元</font> 18 <p class="inner-text">优惠券</p> 19 </a> 20 </td> 21 </tr> 22 <tr> 23 <td class="box lottery-unit lottery-unit-7"> 24 <a href="javascript:;"> 25 <font class="num">5元</font> 26 <p class="inner-text">优惠券</p> 27 </a> 28 </td> 29 <td class="btn-start"><a href="javascript:;"></a></td> 30 <td class="box lottery-unit lottery-unit-3"> 31 <a href="javascript:;"> 32 <font class="num">1元</font> 33 <p class="inner-text">优惠券</p> 34 </a> 35 </td> 36 </tr> 37 <tr> 38 <td class="box lottery-unit lottery-unit-6"> 39 <a href="javascript:;"> 40 <font class="num">10</font> 41 <p class="inner-text">积分</p> 42 </a> 43 </td> 44 <td class="box lottery-unit lottery-unit-5"> 45 <a href="javascript:;"> 46 <font class="num">10元</font> 47 <p class="inner-text">优惠券</p> 48 </a> 49 </td> 50 <td class="box lottery-unit lottery-unit-4"> 51 <a href="javascript:;"> 52 <font class="num">谢谢</font> 53 <font class="num">参与</font> 54 </a> 55 </td> 56 </tr> 57 </table> 58 </div>
1 var lottery={ 2 index:-1, //当前转动到哪个位置,起点位置 3 count:0, //总共有多少个位置 4 timer:0, //setTimeout的ID,用clearTimeout清除 5 speed:20, //初始转动速度 6 times:0, //转动次数 7 cycle:50, //转动基本次数:即至少需要转动多少次再进入抽奖环节 8 prize:-1, //中奖位置 9 init:function(id){ 10 if ($("#"+id).find(".lottery-unit").length>0) { 11 $lottery = $("#"+id); 12 $units = $lottery.find(".lottery-unit"); 13 this.obj = $lottery; 14 this.count = $units.length; 15 $lottery.find(".lottery-unit-"+this.index).addClass("active"); 16 }; 17 }, 18 roll:function(){ 19 var index = this.index; 20 var count = this.count; 21 var lottery = this.obj; 22 $(lottery).find(".lottery-unit-"+index).removeClass("active"); 23 index += 1; 24 if (index>count-1) { 25 index = 0; 26 }; 27 $(lottery).find(".lottery-unit-"+index).addClass("active"); 28 this.index=index; 29 return false; 30 }, 31 stop:function(index){ 32 this.prize=index; 33 return false; 34 } 35 }; 36 37 function roll(){ 38 lottery.times += 1; 39 lottery.roll(); 40 if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) { 41 clearTimeout(lottery.timer); 42 lottery.prize=-1; 43 lottery.times=0; 44 click=false; 45 }else{ 46 if (lottery.times<lottery.cycle) { 47 lottery.speed -= 10; 48 }else if(lottery.times==lottery.cycle) { 49 var index = Math.random()*(lottery.count)|0; 50 lottery.prize = index; 51 }else{ 52 if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) { 53 lottery.speed += 110; 54 }else{ 55 lottery.speed += 20; 56 } 57 } 58 if (lottery.speed<40) { 59 lottery.speed=40; 60 }; 61 //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize); 62 lottery.timer = setTimeout(roll,lottery.speed); 63 } 64 return false; 65 } 66 67 var click=false; 68 69 window.onload=function(){ 70 lottery.init('lottery'); 71 $("#lottery .btn-start a").click(function(){ 72 if (click) { 73 return false; 74 }else{ 75 lottery.speed=100; 76 roll(); 77 click=true; 78 return false; 79 } 80 }); 81 };
不问收获 恒问耕耘 天道酬勤
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步