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>