jquery.rotate.js實現(xiàn)可選抽獎次數(shù)和中獎內(nèi)容的轉(zhuǎn)盤抽獎代碼
更新時間：2017年08月23日 08:35:29 作者：正是澤
這篇文章主要介紹了jquery.rotate.js實現(xiàn)可選抽獎次數(shù)和中獎內(nèi)容的轉(zhuǎn)盤抽獎代碼,需要的朋友可以參考下
需求：
最多可以抽獎5次，而且，每次只會中“2000元理財金”或者“謝謝參與”，其它的不會抽中（哈哈，果然都是套路）。
效果如下：
一、頁面結(jié)構(gòu)：
<div class="g-content">
<div class="g-lottery-case">
<div class="g-left">
<h2>您已擁有<span class="playnum"></span>次抽獎機會，點擊立刻抽獎！~</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是點擊抽獎按鈕。
這里用的是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);//顯示還剩下多少次抽獎機會
var isture = 0;//是否正在抽獎
var clickfunc = function() {
var data = [1, 2, 3, 4, 5, 6];//抽獎
//data為隨機出來的結(jié)果，根據(jù)概率后的結(jié)果
data = data[Math.floor(Math.random() * data.length)];//1~6的隨機數(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的隨機數(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>次抽獎機會，點擊立刻抽獎！~</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);//顯示還剩下多少次抽獎機會
var isture = 0;//是否正在抽獎
var clickfunc = function() {
var data = [1, 2, 3, 4, 5, 6];//抽獎
//data為隨機出來的結(jié)果，根據(jù)概率后的結(jié)果
data = data[Math.floor(Math.random() * data.length)];//1~6的隨機數(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.點擊抽獎按鈕： playbtn.png
總結(jié)
以上所述是小編給大家介紹的jquery.rotate.js實現(xiàn)可選抽獎次數(shù)和中獎內(nèi)容的轉(zhuǎn)盤抽獎代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
javascript中節(jié)點的最近的相關(guān)節(jié)點訪問方法
parentNode——父節(jié)點;firstChild——第一個子節(jié)點;lastChild——最后一個子節(jié)點;previousSibling——緊挨著的前面的兄弟節(jié)點;這樣就可以作短途旅行，訪問當(dāng)前節(jié)點的某些相關(guān)節(jié)點，感興趣的你可以參考下哈2013-03-03
似乎有人覺得用VBS監(jiān)視注冊表很高級？使用了WMI事件而已，跟《用VBS監(jiān)視進(jìn)程創(chuàng)建和刪除》一樣2011-10-10
Generator 函數(shù)是 ES6 提供的一種異步編程解決方案，語法行為與傳統(tǒng)函數(shù)完全不同。這篇文章給大家介紹Es6 Generator函數(shù)的相關(guān)知識，感興趣的朋友一起看看吧2018-02-02
本文通過示例代碼給大家介紹了js中的閉包，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2017-10-10
JavaScript對象數(shù)組如何按指定屬性和排序方向進(jìn)行排序
這篇文章主要介紹了JavaScript對象數(shù)組如何按指定屬性和排序方向進(jìn)行排序的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了js判斷手機和pc端選擇不同執(zhí)行事件的方法,可實現(xiàn)判斷手機端還是PC端再選擇對應(yīng)的執(zhí)行事件的功能,是非常實用的技巧,需要的朋友可以參考下2015-01-01
我們在進(jìn)行圖片保存的時候經(jīng)常會發(fā)現(xiàn)圖片跨域了,下面下面這篇文章主要給大家介紹了關(guān)于html2canvas圖片跨域問題的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡單抽獎功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
Javascript中查找不以XX字符結(jié)尾的單詞示例代碼
我在寫這篇文章之前花了2個多小時在弄正則表達(dá)式，下為大家介紹下具體的實現(xiàn)思路，感興趣的朋友可以參考下2013-10-10
詳解webpack-dev-server 設(shè)置反向代理解決跨域問題
后端只負(fù)責(zé)接口，前端負(fù)責(zé)數(shù)據(jù)展示、邏輯處理。那么如何跨域？這篇文章主要介紹了webpack-dev-server 設(shè)置反向代理解決跨域問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04