轉盤抽獎

涉及的重點：JQ特效，概率

邏輯設計：
1.把前端頁面設計好，轉盤可以用table標簽做，樣式設計好
2.控制器把抽獎物查詢出來，有序輸出到前端頁面設計好的轉盤上
3.寫JQ特效，原理就是輪流給每個抽獎項添加特定樣式，實現看起來轉盤轉動的效果
4.抽獎，Ajax調用控制器的方法，該方法有三步：
?? ?1.查詢出抽獎物（2步驟類似）
?? ?2.調用概率方法
?? ?3.把調用概率選中的抽獎物返回給前端頁面Ajax
5.成功：根據返回的抽獎物設定的位置，讓轉盤最后轉到返回的抽獎物位置;失敗：提示“請求失敗”

有個問題：用戶如何快速點擊抽獎按鈕，會多次觸發點擊事件，使轉盤連續轉動多次。我想實現的效果是無論用戶點擊多少次，等轉盤轉完后（整個流程完整一輪）再執行下一次點擊事件，再轉動起來。我運用了彈框停頓阻止一下，但如果快速連續點擊還是會執行多次點擊事件，請有經驗的大佬指導一下，謝謝！！

重點部分代碼：
1.概率方法get_rand（）：

//抽獎概率運算 function get_rand($proArr) { $result = array();foreach ($proArr as $key => $val) { $arr[$key] = $val['v']; //概率}//概率存在百分百時if(in_array(100, $arr)){foreach($arr as $key => $value){if($value == 100){$data[] = $key;}}shuffle($data);//打亂數組$ke = $data[0];//獲取第一次值return $proArr[$ke];}// 概率數組的總概率 $proSum = array_sum($arr); asort($arr);// 概率數組循環 foreach ($arr as $k => $v) { $randNum = mt_rand(1, $proSum); if ($randNum <= $v) { $result = $proArr[$k]; break; } else { $proSum -= $v; } } return $result; }

2.轉盤轉動抽獎JQ
類似類里調用方法（定義一個變量lottery，里面有變量的初始化和方法,可以運用lottery.方法，實現調用）。layer是彈框插件，需要有layer插件包才有效果
注意：JQ運行時不用等方法調回結果再往下執行

<script type="text/javascript"> $(function() {// layer.open({ // content: "積分抽獎暫時關閉，系統升級中" // ,btnAlign: 'c' // ,btn: ['確定'] // ,style:'width: 80%;max-width: 340px;' // ,yes: function(){ // window.location.href="{:U('Mobile/User/index')}"; // }, no: function(){ // window.location.href="{:U('Mobile/User/index')}"; // } // });var msg='',flag = 0;var lottery = {place: 0, //請求后指定停留在某個位置click: false, //默認值為false可抽獎，防止重復點擊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");};},getLottery: function() {//ajax請求中獎接口，本案例注釋便于案例正常展示效果，實際中可參考注釋的代碼$.ajax({url: "/Mobile/User/luck_draw",//中獎接口type: 'POST',dataType: 'json',data: {// 'activityCategory': 'POINT_SHOP'//提交字段}}).done(function(data) {if(data.res){lottery.place = data.res.sort;lottery.speed = 100;lottery.stop(); //轉圈過程不響應click事件，會將click置為falselottery.click = true; //一次抽獎完成后，設置click為true，可繼續抽獎}else{alert(data.msg);flag = 1;return false;}}).fail(function() {alert('請求失敗，請重試！');return false;});// if(odds >= 0){// lottery.speed = 100;// lottery.stop(); //轉圈過程不響應click事件，會將click置為false// lottery.click = true; //一次抽獎完成后，設置click為true，可繼續抽獎// }else{// $('.prize_pic').attr('src','__ELSE__/img/cj5.png');// $('.prize_yes').addClass('on');// $('.prize_name,.go_prize_center').css('display','none');// $('.gongxi').text('抽獎機會用完啦！');// }},roll: function() {var index = this.index,count = this.count,lottery = this.obj;$(lottery).find(".lottery-unit-" + index).removeClass("active");index += 1;if (index > count - 1) {index = 0;};$(lottery).find(".lottery-unit-" + index).addClass("active");this.index = index;return false;},stop: function() {lottery.times += 1;lottery.roll(); //轉動過程調用的是lottery的roll方法，這里是第一次調用初始化if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {clearTimeout(lottery.timer);lottery.prize = -1;lottery.times = 0;lottery.click = false;//可以在這個位置寫上中獎彈框，這個是轉盤停止時觸發事件//開啟中獎彈窗var src = $(".lottery-unit-"+lottery.index).find('img').attr('src');var name = $(".lottery-unit-"+lottery.index).find('span').text();$('.prize_pic').attr('src',src);$('.prize_yes').addClass('on');if(lottery.index == 11){$('.prize_name').css('display','none');$('.gongxi').text('很遺憾~~');}else{$('.prize_name').text(name);}console.log('您抽中了第' + lottery.place + '個獎品');} else {if (lottery.times < lottery.cycle) {lottery.speed -= 10;} else if (lottery.times == lottery.cycle) {//lottery.place = Math.random() * (lottery.count) | 0; //案例中獎物品通過一個隨機數生成lottery.prize = lottery.place;// lottery.prize = lottery.place; //這個可以通過ajax請求回來的數據賦值給lottery.place } 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(lottery.stop, lottery.speed); //循環調用}return false;}};// var odds=3;//抽獎機會$("#lottery .cjBtn").on('click', function(event) {lottery.getLottery(); if(flag){return false; } event.preventDefault();//防止鏈接打開lottery.init('lottery');if (lottery.click) { //click控制一次抽獎過程中不能重復點擊抽獎按鈕，后面的點擊不響應layer.open({content: "正在抽獎過程中,請稍等",btnAlign: 'c' ,btn: ['確定'],style:'width: 80%;max-width: 340px;'});return false;} else { // lottery.getLottery(); return false;}//剩余抽獎機會// odds=odds-1;// if(odds > 0){// $('.sy_num').text(odds);// }else{// $('.sy_num').text(0);// }});//閃燈效果var num = 0;$(".shanDeng").attr("class",function(){setInterval(function(){ num++;if(num%2==0){$('#deng').addClass("shanDeng2");}else{$('#deng').addClass("shanDeng");$('#deng').removeClass('shanDeng2');}},500)})//關閉彈窗$('.close_it').click(function(){$('.prize_yes').removeClass('on');$('.prize_pic').attr('src','');$('.prize_name').text('');$('.gongxi').text('恭喜你中獎了！');})}); </script>

總結

以上是生活随笔為你收集整理的转盘抽奖（主要：概率和JQ）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。