jquery实现转盘抽奖
jquery实现转盘抽奖
一、总结
一句话总结:这里环形转盘,环形的东西可以化成线性的,然后访问到哪个,给他加上背景为红的样式,用定时器开控制转盘的速度,函数执行的时间间隔越小,就运动的越快。
1、如何实现类似9宫格形式抽奖盘的样式?
背景图加上表格布局
2、在表格实现类似9宫格形式抽奖盘的样式的时候,最中间的开始抽奖占据的2*2如何留出来?
<td colspan="2" rowspan="2"><a href="#"></a></td>
用的是colspan和rowspan,里面放a标签做点击开始抽奖的事件之用,a标签里面不用放东西,显示的内容是背景图里面的开始抽奖
3、setTimeout()方法常用两个参数是什么意思?
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
setTimeout(roll,lottery.speed);
4、settimeout的返回值?
返回数值id,整型,可用于 取消 setTimeout 设置的函数clearTimeout(id)。也就是这个setTimeout的唯一标示符。
示例:
var st=setTimeout(function,time);
clearTimeout(st);
结果:取消定时器
这就是其返回值的作用,即作为一个引用,指向setTimeout
189 lottery.timer = setTimeout(roll,lottery.speed); //lottery.speed毫秒后执行roll方法,所以这里也算是递归啦
164 clearTimeout(lottery.timer); //清除设置的timeout,也就是转盘停下来
5、| 这个运算符是什么意思?
unsigned char a=5,b=11;
5 == 0000 0101 (二进制)
10== 0000 1011
a | b== 0000 1111
| 是把某两个数中, 只要其中一个的某一位为1,则结果的该位就为1;
& 相反
173 }else if(lottery.times==lottery.cycle) { //基础次数到了,确定奖品,但是后面还要转到奖品这去
174 var index = Math.random()*(lottery.count)|0; //随机数确定奖品是哪一个
175 lottery.prize = index;
6、如何快速看懂代码?
打印中间结果可以很快看懂
7、抽奖的算法思路是?
在第50次的时候用随机数找到奖品,然后再让转盘转到那一个上面去
8、如何实现转动的时候先慢后快,然后再慢,然后选到物品?
最开始函数执行的时间间隔 设置为100ms,然后运行的话每次-10,直到捡到40,然后选出来物品后,时间间隔开始加,每次累加+20,最后一次+110
9、抽奖完成之后弹出你抽到的物品,怎么实现(怎么实现在一个耗时长的事件执行完之后执行下一个)?
这里算好时间,用的setTimeout定时器
213 function reportRewardAnswer(str){
214 setTimeout(function(){
215 $.giftWarm("恭喜你抽中了",'<span>'+str+'</span>个金豆');
216 },600);
217 }
10、怎么用js或jquery把一个函数b绑定到另一个函数a之后执行(并没有什么用,但是可以体会回调)?
简单的说:就是将函数b作为参数传入函数a,完成函数a之后执行。
//定义函数a
function
a(callback){
alert(
"a要做的操作"
);
callback();
//a执行完执行b
}
function
b(){
alert(
"b要执行的操作"
);
}
简单的说:就是将函数b作为参数传入函数a,完成函数a之后执行。
11、为什么用表格布局很难受?
因为表格就算你指定了宽高,它还是会自己调整的,自己内部会微调,
指定表格主体,然后再指定里面每一个,就不会乱
二、jquery实现转盘抽奖
1、截图
2、代码
1 <!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>转盘抽奖游戏代码 - 源码之家</title> 5 6 7 <style type="text/css"> 8 #lottery{ 9 width:574px; 10 height:584px; 11 margin:20px auto 0; 12 background:url(images/bg.jpg) no-repeat; 13 padding:50px 55px; 14 } 15 #lottery table td{ 16 padding: 0px; 17 margin: 0px; 18 width:142px; 19 height:142px; 20 text-align:center; 21 vertical-align:middle; 22 color:#333; 23 border-width: 0px; 24 } 25 #lottery table td img{ 26 width:142px; 27 height:136px; 28 } 29 #lottery table td a{ 30 width:284px; 31 height:284px; 32 line-height:150px; 33 display:block; 34 text-decoration:none; 35 } 36 #lottery table td.active{ 37 background-color:#ea0000; 38 } 39 #lottery table tr{ 40 height: 142px; 41 } 42 .reward_info{ 43 width: 100%; 44 height: 100%; 45 z-index: 1000; 46 display: flex; 47 position: fixed; 48 right: 0; 49 left: 0; 50 top: 0; 51 margin: auto; 52 background-color: rgba(0,0,0,0.4); 53 display: flex; 54 text-align: center; 55 56 } 57 58 .reward_info_box{ 59 border-radius: .6rem; 60 background-color: #fff; 61 width: 80%; 62 margin:400px auto 0; 63 height: 500px; 64 } 65 66 .reward_info_img{ 67 background:url(images/compound-warm-img.png) no-repeat; 68 width: 720px; 69 height: 556px; 70 background-size: 100% 100%; 71 margin: -258px auto 0; 72 /*position: absolute;*/ 73 74 } 75 76 .reward_info_btn > button{ 77 /*background: #f00;*/ 78 width: 150px; 79 border-radius:10px; 80 background: #ff9000; 81 color: #fff; 82 font-size: 24px; 83 font-weight: bolder; 84 text-align: center; 85 vertical-align:middle; 86 padding-top: 5px; 87 padding-bottom: 7px; 88 } 89 90 91 </style> 92 93 </head> 94 <body> 95 96 <div id="lottery"> 97 <table border="0" cellpadding="0" cellspacing="0"> 98 <tr> 99 <td class="lottery-unit lottery-unit-0"><img src="images/1.png"></td> 100 <td class="lottery-unit lottery-unit-1"><img src="images/2.png"></td> 101 <td class="lottery-unit lottery-unit-2"><img src="images/4.png"></td> 102 <td class="lottery-unit lottery-unit-3"><img src="images/3.png"></td> 103 </tr> 104 <tr> 105 <td class="lottery-unit lottery-unit-11"><img src="images/7.png"></td> 106 <td colspan="2" rowspan="2"><a href="#"></a></td> 107 <td class="lottery-unit lottery-unit-4"><img src="images/5.png"></td> 108 </tr> 109 <tr> 110 <td class="lottery-unit lottery-unit-10"><img src="images/1.png"></td> 111 <td class="lottery-unit lottery-unit-5"><img src="images/6.png"></td> 112 </tr> 113 <tr> 114 <td class="lottery-unit lottery-unit-9"><img src="images/3.png"></td> 115 <td class="lottery-unit lottery-unit-8"><img src="images/6.png"></td> 116 <td class="lottery-unit lottery-unit-7"><img src="images/8.png"></td> 117 <td class="lottery-unit lottery-unit-6"><img src="images/7.png"></td> 118 </tr> 119 </table> 120 </div> 121 122 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> 123 <script type="text/javascript"> 124 var lottery={ 125 index:-1, //当前转动到哪个位置,起点位置 126 count:0, //总共有多少个位置 127 timer:0, //setTimeout的ID,用clearTimeout清除 128 speed:20, //初始转动速度 129 times:0, //转动次数 130 cycle:50, //转动基本次数:即至少需要转动多少次再进入抽奖环节 131 prize:-1, //中奖位置 132 init:function(id){ 133 if ($("#"+id).find(".lottery-unit").length>0) { 134 $lottery = $("#"+id); 135 $units = $lottery.find(".lottery-unit"); 136 this.obj = $lottery; 137 this.count = $units.length; //获取总共的位置数 138 $lottery.find(".lottery-unit-"+this.index).addClass("active"); //设置抽奖开始的初始位置(用active类) 139 }; 140 }, 141 roll:function(){ 142 var index = this.index; 143 var count = this.count; 144 var lottery = this.obj; 145 $(lottery).find(".lottery-unit-"+index).removeClass("active"); //移除上一个激活的奖品选项 146 index += 1; 147 if (index>count-1) { //环变成链 148 index = 0; 149 }; 150 $(lottery).find(".lottery-unit-"+index).addClass("active");//将当前这个奖品选项设置为激活 151 this.index=index; 152 return false; 153 }, 154 stop:function(index){ 155 this.prize=index; //奖品位置 156 return false; 157 } 158 }; 159 160 function roll(){ 161 lottery.times += 1; 162 lottery.roll(); //调用旋转函数 163 if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) { //这里是转盘停下来,超过基础转数10次以上,并且index指到那个奖品就停下来 164 clearTimeout(lottery.timer); //清除设置的timeout,也就是转盘停下来 165 lottery.prize=-1; //奖品初始化为-1 166 lottery.times=0; //已经转动次数初始化为0 167 click=false; //开始转动了,让点击变的不可点击 168 //alert(lottery.index); 169 reportRewardAnswer(lottery.index); 170 }else{ 171 if (lottery.times<lottery.cycle) { //如果还应该转,就接着转 172 lottery.speed -= 10; //转的事件间隔逐渐变小,从而转速变快 173 }else if(lottery.times==lottery.cycle) { //基础次数到了,确定奖品,但是后面还要转到奖品这去 174 var index = Math.random()*(lottery.count)|0; //随机数确定奖品是哪一个 175 lottery.prize = index; 176 }else{ //当转动次数达到转动基本次数后 177 //(lottery.prize==0 && lottery.index==7) 这句话的意思是如果随机数是0,那么奖品就是是第一个,从7的位置就开始+110毫秒,后面都是加20ms 178 //(lottery.prize==0 && lottery.index==7) 没有这句话的话,因为这个是环,不好判断0的前一个,所以这里用了特例判断 179 if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) { 180 lottery.speed += 110; //变慢很多点,这是最后那一次累加的110毫秒 181 }else{ 182 lottery.speed += 20; //变慢一点点 183 } 184 } 185 if (lottery.speed<40) { //设置最小的函数执行事件间隔,也就是设置最大的转速 186 lottery.speed=40; 187 }; 188 //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize+'^^^^^^^'+lottery.index); 189 lottery.timer = setTimeout(roll,lottery.speed); //lottery.speed毫秒后执行roll方法,所以这里也算是递归啦 190 } 191 return false; 192 } 193 194 var click=false; 195 196 window.onload=function(){ 197 //reportRewardAnswer(lottery.index); 198 lottery.init('lottery'); //对象的方法 199 $("#lottery a").click(function(){ 200 if (click) { 201 return false; 202 }else{ 203 lottery.speed=100; 204 roll(); 205 click=true; 206 return false; 207 } 208 }); 209 }; 210 211 212 213 function reportRewardAnswer(str){ 214 setTimeout(function(){ 215 $.giftWarm("恭喜你抽中了",'<span>'+str+'</span>个金豆'); 216 },600); 217 } 218 219 jQuery.extend({ 220 giftWarm : function(b, a) { 221 $("body") 222 .append( 223 '<div id="reward_info" class="reward_info"> <div class="reward_info_box"><div class="reward_info_img"></div><h3>' 224 + b 225 + "</h3><h3>" 226 + a 227 + '</h3> <div class="reward_info_btn"><button>\u786e\u5b9a</button></div></div></div>'); 228 $(".reward_info").click(function() { 229 $(this).remove() 230 }) 231 } 232 }); 233 234 </script> 235 236 237 238 </body> 239 </html>
我的旨在学过的东西不再忘记(主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法)的偏公益性质的完全免费的编程视频学习网站:
【读书编程笔记】fanrenyi.com;有各种前端、后端、算法、大数据、人工智能等课程。
版权申明:欢迎转载,但请注明出处
一些博文中有一些参考内容因时间久远找不到来源了没有注明,如果侵权请联系我删除。
AI交流资料群:753014672