<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抽奖</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
* {
padding: 0;
margin: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
font-size: 100%;
}
.content {
100%;
height: auto;
background: url('./images/bg.png') no-repeat;
background-size: 100% auto;
position: relative;
}
.content .rotateBox {
100%;
height: auto;
margin-top: 25px;
position: relative;
}
.content .rotateBox .bg {
display: block;
100%;
height: auto;
}
.content .rotateBox .star {
display: inline-block;
position: absolute;
top: 49%;
left: 51%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
20%;
height: 20%;
background: url('./images/btn.png') center center no-repeat;
background-size: 100%;
}
.content .rotateBox .show {
position: absolute;
top: 30%;
left: 31%;
38%;
height: 38%;
background: url('./images/car.png') top center no-repeat;
background-size: 40px auto;
}
.content .infor {
100%;
margin-top: 25px;
padding: 25px 30px 35px 40px;
background: url('./images/bg2.png') no-repeat;
background-size: 100% auto;
}</style>
</head>
<body>
<div class="content">
<div class="rotateBox">
<img src="./images/img.png" alt="" class="bg" />
<span class="show"></span>
<span class="star"></span>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script>
$(function() {
var $btn = $('.show'); // 旋转的div
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)]; //1~6的随机数
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;
}
}
$(".star").click(function() {
if(isture) return; // 如果在执行就退出
isture = true; // 标志为 在执行
if(playnum <= 0) { //当抽奖次数为0的时候执行
alert("没有次数了");
// $('.playnum').html(0); //次数显示为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>
</html>