<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery限制次数的大转盘抽奖代码</title>
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style>
.g-content {
width: 100%;
background: #fbe3cc;
height: auto;
font-family: "微软雅黑", "microsoft yahei";
}
.g-content .g-lottery-case {
width: 500px;
height: 445px;
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(img/lottery/ly-plate-c.gif) no-repeat;
}
.g-lottery-box .g-lottery-img {
width: 340px;
height: 340px;
position: relative;
background: url(img/lottery/bg-lottery.png) no-repeat;
left: 30px;
top: 30px;
}
.g-lottery-box .playbtn {
width: 186px;
height: 186px;
position: absolute;
top: 77px;
left: 77px;
background: url(img/lottery/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">
<a class="playbtn" href="javascript:;" title="开始抽奖"></a>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.rotate.min.js"></script>
<script>
$(function() {
var $btn = $('.playbtn');
var playnum = 1; //初始次数，由后台传入
$('.playnum').html(playnum);
var isture = 0;
var clickfunc = function() {
var data = [1, 2, 3, 4, 5, 6];
//data为随机出来的结果，根据概率后的结果
data = data[Math.floor(Math.random() * data.length)];
switch(data) {
case 1:
rotateFunc(1, 0, '恭喜您获得2000元理财金!');
break;
case 2:
rotateFunc(2, 60, '谢谢参与~再来一次吧~');
break;
case 3:
rotateFunc(3, 120, '恭喜您获得5200元理财金!');
break;
case 4:
rotateFunc(4, 180, '恭喜您获得100元京东E卡，将在次日以短信形式下发到您的手机上，请注意查收!');
break;
case 5:
rotateFunc(5, 240, '谢谢参与~再来一次吧~');
break;
case 6:
rotateFunc(6, 300, '恭喜您获得1000元理财金!');
break;
}
}
$btn.click(function() {
if(isture) return; // 如果在执行就退出
isture = true; // 标志为 在执行
//先判断是否登录,未登录则执行下面的函数
if(1 == 2) {
$('.playnum').html('0');
alert("请先登录");
isture = false;
} else { //登录了就执行下面
if(playnum <= 0) { //当抽奖次数为0的时候执行
alert("没有次数了");
$('.playnum').html(0);
isture = false;
} else { //还有次数就执行
playnum = playnum - 1; //执行转盘了则次数减1
if(playnum <= 0) {
playnum = 0;
}
$('.playnum').html(playnum);
clickfunc();
}
}
});
var rotateFunc = function(awards, angle, text) {
isture = true;
$btn.stopRotate();
$btn.rotate({
angle: 0,
duration: 4000, //旋转时间
animateTo: angle + 1440, //让它根据得出来的结果加上1440度旋转
callback: function() {
isture = false; // 标志为 执行完毕
alert(text);
}
});
};
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
jQuery限制次数的大转盘抽奖代码.zip
版权申诉
132 浏览量
2023-09-27
22:15:45
上传
评论
收藏 112KB ZIP 举报
jQuery限制次数的大转盘抽奖代码.zip （7个子文件） 
js 
jquery-1.8.3.min.js 91KB jquery.rotate.min.js 7KB img lottery 
playbtn.png 15KB bg-lottery.png 39KB
ly-plate-c.gif 20KB css reset.css 1KB
index.html 4KB资源评论
