需求：
最多可以抽獎5次，而且，每次只會中“2000元理財金”或者“謝謝參與”，其它的不會抽中（哈哈，果然都是套路）。
效果如下：
一、頁面結(jié)構(gòu)：
<div class="g-content"> <div class="g-lottery-case"> <div class="g-left"> <h2>您已擁有<span class="playnum"></span>次抽獎機(jī)會，點(diǎn)擊立刻抽獎！~</h2> <div class="g-lottery-box"> <div class="g-lottery-img"> </div> <a class="playbtn" href="javascript:;" rel="external nofollow" rel="external nofollow" title="開始抽獎"></a> </div> </div> </div></div>
標(biāo)簽h2為提示內(nèi)容，.playnum是剩余抽獎次數(shù)，.g-lottery-img是最外層的閃燈，.g-lottery-img是轉(zhuǎn)動的內(nèi)容，.playbtn是點(diǎn)擊抽獎按鈕。
這里用的是jquery.rotate.js，所以要引入jquery然后引入jquery.rotate.js，百度一下很簡單的，沒幾個AIP。
二、簡單的樣式：
<style> .g-content { width: 100%; background: #fbe3cc; height: auto; font-family: "微軟雅黑", "microsoft yahei"; } .g-content .g-lottery-case { width: 500px; margin: 0 auto; overflow: hidden; } .g-content .g-lottery-case .g-left h2 { font-size: 20px; line-height: 32px; font-weight: normal; margin-left: 20px; } .g-content .g-lottery-case .g-left { width: 450px; float: left; } .g-lottery-box { width: 400px; height: 400px; margin-left: 30px; position: relative; background: url(ly-plate-c.gif) no-repeat; } .g-lottery-box .g-lottery-img { width: 340px; height: 340px; position: relative; background: url(bg-lottery.png) no-repeat; left: 30px; top: 30px; } .g-lottery-box .playbtn { width: 186px; height: 186px; position: absolute; top: 50%; left: 50%; margin-left: -94px; margin-top: -94px; background: url(playbtn.png) no-repeat; }</style>樣式就定一下高度，居中一下，顯示一下背景圖片
三、JS代碼：
<script> $(function() { var $btn = $('.g-lottery-img');// 旋轉(zhuǎn)的div var playnum = 5; //初始次數(shù)，由后臺傳入 $('.playnum').html(playnum);//顯示還剩下多少次抽獎機(jī)會 var isture = 0;//是否正在抽獎 var clickfunc = function() { var data = [1, 2, 3, 4, 5, 6];//抽獎 //data為隨機(jī)出來的結(jié)果，根據(jù)概率后的結(jié)果 data = data[Math.floor(Math.random() * data.length)];//1~6的隨機(jī)數(shù) switch(data) { case 1: rotateFunc(1, 0, '恭喜您獲得2000元理財金'); break; case 2: rotateFunc(2, 0, '恭喜您獲得2000元理財金2'); break; case 3: rotateFunc(3, 0, '恭喜您獲得2000元理財金3'); break; case 4: rotateFunc(4, -60, '謝謝參與4'); break; case 5: rotateFunc(5, 120, '謝謝參與5'); break; case 6: rotateFunc(6, 120, '謝謝參與6'); break; } } $(".playbtn").click(function() { if(isture) return; // 如果在執(zhí)行就退出 isture = true; // 標(biāo)志為 在執(zhí)行 if(playnum <= 0) { //當(dāng)抽獎次數(shù)為0的時候執(zhí)行 alert("沒有次數(shù)了"); $('.playnum').html(0);//次數(shù)顯示為0 isture = false; } else { //還有次數(shù)就執(zhí)行 playnum = playnum - 1; //執(zhí)行轉(zhuǎn)盤了則次數(shù)減1 if(playnum <= 0) { playnum = 0; } $('.playnum').html(playnum); clickfunc(); } }); var rotateFunc = function(awards, angle, text) { isture = true; $btn.stopRotate(); $btn.rotate({ angle: 0,//旋轉(zhuǎn)的角度數(shù) duration: 4000, //旋轉(zhuǎn)時間 animateTo: angle + 1440, //給定的角度,讓它根據(jù)得出來的結(jié)果加上1440度旋轉(zhuǎn) callback: function() { isture = false; // 標(biāo)志為 執(zhí)行完畢 alert(text); } }); }; });</script>說到底就是用一個1~6的隨機(jī)數(shù)，然后把對應(yīng)的角度值傳給jquery.rotate.js,它就會轉(zhuǎn)到相應(yīng)的地方，最后做一下對應(yīng)剩余次數(shù)的判斷和修改。
最后所有代碼為：
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>抽獎</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <style> .g-content { width: 100%; background: #fbe3cc; height: auto; font-family: "微軟雅黑", "microsoft yahei"; } .g-content .g-lottery-case { width: 500px; margin: 0 auto; overflow: hidden; } .g-content .g-lottery-case .g-left h2 { font-size: 20px; line-height: 32px; font-weight: normal; margin-left: 20px; } .g-content .g-lottery-case .g-left { width: 450px; float: left; } .g-lottery-box { width: 400px; height: 400px; margin-left: 30px; position: relative; background: url(ly-plate-c.gif) no-repeat; } .g-lottery-box .g-lottery-img { width: 340px; height: 340px; position: relative; background: url(bg-lottery.png) no-repeat; left: 30px; top: 30px; } .g-lottery-box .playbtn { width: 186px; height: 186px; position: absolute; top: 50%; left: 50%; margin-left: -94px; margin-top: -94px; background: url(playbtn.png) no-repeat; } </style></head><body><div class="g-content"> <div class="g-lottery-case"> <div class="g-left"> <h2>您已擁有<span class="playnum"></span>次抽獎機(jī)會，點(diǎn)擊立刻抽獎！~</h2> <div class="g-lottery-box"> <div class="g-lottery-img"> </div> <a class="playbtn" href="javascript:;" rel="external nofollow" rel="external nofollow" title="開始抽獎"></a> </div> </div> </div></div><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript" src="jsmin/jquery.rotate.min.js"></script><script>$(function() { var $btn = $('.g-lottery-img');// 旋轉(zhuǎn)的div var playnum = 5; //初始次數(shù)，由后臺傳入 $('.playnum').html(playnum);//顯示還剩下多少次抽獎機(jī)會 var isture = 0;//是否正在抽獎 var clickfunc = function() { var data = [1, 2, 3, 4, 5, 6];//抽獎 //data為隨機(jī)出來的結(jié)果，根據(jù)概率后的結(jié)果 data = data[Math.floor(Math.random() * data.length)];//1~6的隨機(jī)數(shù) switch(data) { case 1: rotateFunc(1, 0, '恭喜您獲得2000元理財金'); break; case 2: rotateFunc(2, 0, '恭喜您獲得2000元理財金2'); break; case 3: rotateFunc(3, 0, '恭喜您獲得2000元理財金3'); break; case 4: rotateFunc(4, -60, '謝謝參與4'); break; case 5: rotateFunc(5, 120, '謝謝參與5'); break; case 6: rotateFunc(6, 120, '謝謝參與6'); break; } } $(".playbtn").click(function() { if(isture) return; // 如果在執(zhí)行就退出 isture = true; // 標(biāo)志為 在執(zhí)行 if(playnum <= 0) { //當(dāng)抽獎次數(shù)為0的時候執(zhí)行 alert("沒有次數(shù)了"); $('.playnum').html(0);//次數(shù)顯示為0 isture = false; } else { //還有次數(shù)就執(zhí)行 playnum = playnum - 1; //執(zhí)行轉(zhuǎn)盤了則次數(shù)減1 if(playnum <= 0) { playnum = 0; } $('.playnum').html(playnum); clickfunc(); } }); var rotateFunc = function(awards, angle, text) { isture = true; $btn.stopRotate(); $btn.rotate({ angle: 0,//旋轉(zhuǎn)的角度數(shù) duration: 4000, //旋轉(zhuǎn)時間 animateTo: angle + 1440, //給定的角度,讓它根據(jù)得出來的結(jié)果加上1440度旋轉(zhuǎn) callback: function() { isture = false; // 標(biāo)志為 執(zhí)行完畢 alert(text); } }); };});</script></body></html>所需要的圖片(這里好像上傳不了壓縮文件，所以不能整個打包上傳了)：
#復(fù)制下面的圖片名稱-鼠標(biāo)移到圖片上-右鍵-圖片另存為-粘貼保存#
1.最外面的閃燈：ly-plate-c.gif
2.六個中獎內(nèi)容：bg-lottery.png
3.點(diǎn)擊抽獎按鈕： playbtn.png
總結(jié)
以上所述是小編給大家介紹的jquery.rotate.js實(shí)現(xiàn)可選抽獎次數(shù)和中獎內(nèi)容的轉(zhuǎn)盤抽獎代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
