演示网站 jQuery移动端app大转盘抽奖
编写代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>转盘活动</title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
<script src="statics/js/flexible.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- jquery 旋转插件 -->
<script src="statics/js/jquery.rotate.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 大转盘 -->
<div class="lottery">
<div class="zhuanpan">
<div class="turn">
<img src="statics/images/zhuanpan.png" alt="">
</div>
<div class="control choujiang">
<img src="statics/images/control.png" alt="">
</div>
</div>
<!-- 立即抽奖 -->
<div class="btn">
<button class="choujiang">立即抽奖</button>
</div>
</div>
<!-- 获奖名单 -->
<div class="container">
<div class="card hjmd">
<div class="title"><i></i><span>获奖名单</span><i></i></div>
<div class="table">
<table>
<tr>
<th>昵称</th>
<th>奖品</th>
<th>时间</th>
</tr>
<tr>
<td>Sky0</td>
<td>10元现金券</td>
<td>2021.06.21</td>
</tr>
<tr>
<td>谁啊谁..</td>
<td>智能音箱</td>
<td>2021.06.21</td>
</tr>
<tr>
<td>啊你说..</td>
<td>100元现金券</td>
<td>2021.06.21</td>
</tr>
<tr>
<td>He oo</td>
<td>17VIP会员</td>
<td>2021.06.21</td>
</tr>
<tr>
<td>〒_〒</td>
<td>智能电视</td>
<td>2021.06.21</td>
</tr>
</table>
</div>
</div>
<!-- 礼物免费领 -->
<div class="card lwmfl">
<div class="title"><i></i><span>礼物免费领</span><i></i></div>
<div class="subtitle">本次活动最高奖项，1万元红包 奖品如下</div>
<div class="hongbao t">
<div class="item">
<div class="img">
<img src="statics/images/hongbao.png" alt="">
<span>1万元</span>
</div>
<p>一等奖</p>
<p>1万元现金红包</p>
</div>
</div>
<div class="hongbao b">
<div class="item">
<div class="img">
<img src="statics/images/hongbao.png" alt="">
<span>5000</span>
</div>
<p>二等奖</p>
<p>5千元现金红包</p>
</div>
<div class="item">
<div class="img">
<img src="statics/images/hongbao.png" alt="">
<span>2000</span>
</div>
<p>三等奖</p>
<p>2千元现金红包</p>
</div>
</div>
</div>
<!-- 领取任务 -->
<div class="card lqrw">
<div class="title"><i></i><span>领取任务</span><i></i></div>
<div class="list">
<ul>
<li>
<span>分享好友获得抽奖1次</span>
<button>立即分享</button>
</li>
<li>
<span>参与投资理财获取奖励</span>
<button>做任务</button>
</li>
<li>
<span>连续签到6天获得抽奖奖励</span>
<button>立即签到</button>
</li>
</ul>
</div>
</div>
<!-- 活动规则 -->
<div class="card hdgz">
<div class="title"><i></i><span>活动规则</span><i></i></div>
<div class="list">
<ul>
<li>
<span>本活动用户均可参加</span>
</li>
<li>
<span>活动期间邀请好友参加均可获得相应的活动奖励。</span>
</li>
<li>
<span>本活动最终解释权归本平台所有。</span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<script>
// 抽奖
var bRotate = false;// 防止重复点击
$(".choujiang").click(function () {
if (bRotate) return false;
var item = Math.floor(Math.floor(Math.random() * 10 + 1))//生成0~10的随机数
console.log(item);
// 逆时针每个60度
switch (item) {
case 0:
rotateFn(0, '谢谢参与');
break;
case 1:
rotateFn(60, '一等奖888元');
break;
case 2:
rotateFn(120, '谢谢参与');
break;
case 3:
rotateFn(180, '三等奖88元');
break;
case 4:
rotateFn(240, '三等奖88元');
break;
case 5:
rotateFn(300, '二等奖188元');
break;
case 6: //增加"未中奖"概率
rotateFn(0, '谢谢参与');
break;
case 7:
rotateFn(360, '谢谢参与');
break;
case 8:
rotateFn(0, '谢谢参与');
break;
case 9:
rotateFn(360, '谢谢参与');
break;
case 10:
rotateFn(0, '谢谢参与');
break;
}
})
function rotateFn(angles, txt) { //控制轮盘在angle度停下
bRotate = !bRotate;
$('.turn').stopRotate();
$(".turn").rotate({
angle: 360, //旋转的角度
animateTo: angles + 1800,//从当前角度旋转多少度
duration: 3000, //持续时间
callback: function () { //回调函数
alert(txt);
// 模拟添加抽奖记录
var html = '<tr>'+
'<td>测试</td>'+
'<td>'+txt+'</td>'+
'<td>2021.06.21</td>'+
'</tr>';
$('.hjmd table ').append(html)
bRotate = !bRotate;
}
})
}
</script>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
