JS引用
jquery-3.2.1.min.js
jQueryRotate.2.2.js
效果图
粘贴图片.png
HTML
恭喜您! 中奖了
再接再厉
好运总在下一次，不要放弃!
您没有次数了×
去做任务赚取抽奖次数吧
你还剩 次机会
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
min-height: 100vh;
padding: 0;
margin: 0;
font: 12px/180% Arial, Helvetica, sans-serif;
background-image: url(../images/shopping/drawbj_button.png);
/* overflow: hidden; */
margin: 0;
}
header {
}
section {
background: url(../images/shopping/drawbj_button.png) no-repeat;
background-size: cover;
}
footer {
width: 100%;
height: auto;
padding-bottom: 58px;
}
ul,li {
list-style-type: none;
font-size: 24px;
color: #666666;
}
a {
font-size: 28px;
color: #ffffff;
text-decoration: none;
}
/* a:hover { */
/* color: #3366cc; */
/* text-decoration: underline; */
/* } */
header img {
width: 100%;
height: auto;
}
.rules {
text-align: right;
padding-right: 50px;
padding-top: 20px;
}
.outercont {
width: 100%;
height: 667px;
}
.outer-cont {
width: 100%;
height: 667px;
position: relative;
overflow: hidden;
display: block;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
#outer {
width: 100%;
height: 513px;
text-align: center;
position: absolute;
margin: 0 auto;
}
#inner {
width: 100%;
text-align: center;
position: absolute;
top: 166px;
margin: 0 auto;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
#outer img,#inner img {
display: block;
margin: 0 auto;
}
#outer img {
width: 513px;
height: 513px;
}
.rankinglist-bj {
width: 85%;
height: 328px;
background: url(../images/shopping/draw_phb.png) no-repeat;
background-size: cover;
margin: 0 auto;
}
.rankinglist-title {
padding: 40px 37px;
}
.rankinglist-title p {
font-size: 30px;
color: #ffffff;
}
.rankinglist-content {
width: 83%;
margin: 0 auto;
}
.rankinglist-info {
text-align: center;
padding-top: 18px;
}
.demopage {
width: 960px;
margin: 0 auto;
}
.demopage h2 {
font-size: 14px;
margin: 20px 0;
}
.scrollDiv {
background-color: #ffffff;
border-radius: 25px;
overflow: hidden;
}
#rankinglist li {
height: 40px;
padding-left: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url(ellipsis.xml#ellipsis);
}
#s2,#s3 {
height: 128px;
}
.popbox {
position: relative;
}
.popboxwin {
width: 70%;
height: 600px;
text-align: center;
margin: 0 auto;
display: none;
border-radius: 25px;
background: url(../images/shopping/success.png);
}
.popmsg {
height: 66px;
padding-top: 40px;
color: #ff5959;
font-size: 32px;
position: relative;
}
.poptitle {
font-size: 36px;
display: block;
height: 180px;
line-height: 180px;
color: #ffffff;
position: relative;
}
.popboxnull {
width: 70%;
height: 600px;
text-align: center;
margin: 0 auto;
display: none;
border-radius: 25px;
background: url(../images/shopping/sorry.png);
}
.poptextmsg {
height: 66px;
padding-top: 40px;
color: #EA5151;
font-size: 32px;
position: relative;
}
.popboxmax {
width: 70%;
height: 600px;
text-align: center;
margin: 0 auto;
display: none;
border-radius: 25px;
background: url(../images/shopping/sorry.png);
}
.popchance {
height: 66px;
padding-top: 40px;
color: #EA5151;
font-size: 32px;
position: relative;
}
.popsee {
height: 2rem;
line-height: 2rem;
color: white;
font-size: 1rem;
}
.popnosee {
height: 2rem;
line-height: 2rem;
color: white;
font-size: 1rem;
}
.torecord {
position: absolute;
left: 0;
top: 146px;
}
.clickto {
font-family: "Arial", "微软雅黑";
font-weight: 700;
background-color: #fff;
color: #D60E19;
padding: 10px;
border: 5px solid #ffbe04;
border-radius: 0.3rem;
text-decoration: none;
display: table-caption;
}
.clickto:hover {
text-decoration: none;
}
JS
// 启动转盘
$("#go").click(function(){
havachanges();
});
// 关闭成功弹出框
function hidePopBox(){
$(".popbox").css("display","none");
}
//用户剩余抽奖次数
function havachanges(){
// //活动已经结束
// $(".popboxnull").css("display", "none");
// $(".popboxwin").css("display", "none");
// $(".popbox").css("display", "block");
// $(".popboxmax").css("display", "block");
// return false;
$.ajax({
type:'post',
dataType:"jsonp",
url: activityServiceUrl + 'award/leftDrawNum',
jsonpCallback:"jsonpCallback",
async: false,
data:{
userId:userId,
joinStyleId:joinStyleId,
communityId:communityId,
requestSource:1
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert('出错了！');
return false;
},
success : function(response) {
var leftDrawNum = response.num;
$(".count").text(leftDrawNum);
lottery();
}
});
}
//用户转过转盘之后剩余抽奖次数
function havaallchanges(userId){
// //活动已经结束
// $(".popboxnull").css("display", "none");
// $(".popboxwin").css("display", "none");
// $(".popbox").css("display", "block");
// $(".popboxmax").css("display", "block");
// return false;
$.ajax({
type:'post',
dataType:"jsonp",
url: activityServiceUrl + 'award/leftDrawNum',
jsonpCallback:"jsonpCallback",
async: false,
data:{
userId:userId,
joinStyleId:joinStyleId,
communityId:communityId,
requestSource:1
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert('出错了！');
return false;
},
success : function(response) {
var leftDrawNum = response.num;
$(".count").text(leftDrawNum);
}
});
}
////旋转事件方法
function lottery() {
var num=$(".count").text();
// $(".popboxnull").css("display", "none");
// $(".popboxwin").css("display", "none");
// $(".popbox").css("display", "block");
// $(".popboxmax").css("display", "block");
//// $(".gameover").css("display", "block");
// return false;
if(num == 0){
$(".popboxnull").css("display","none");
$(".popboxwin").css("display","none");
$(".popbox").css("display","block");
$(".popboxmax ").css("display","block");
//alert('亲，您的机会已用完~');
return false;
}else{
// 点击一次后禁用
$("#go").css("display","none");
$.ajax({
type:'post',
dataType:"jsonp",
url: activityServiceUrl + 'award/roll',
jsonpCallback:"jsonpCallback",
async: false,
data:{
joinStyleId:joinStyleId,
userId:userId,
phoneno:phoneno,
communityId:communityId,
requestSource:1
},
error : function() {
alert('出错了！');
// 恢复转盘
$("#go").css("display","block");
return false;
},
success : function(response) {
var resultCode = response.retCode;
if(resultCode=="1000"){
var data = response.retData;
var angle = data.angle;
var msg = data.msg;
var prizeType = data.prizeType;//0 未中奖 1:小钥匙红包 2:小钥匙优惠券 3:商城优惠券 4实体店优惠券
/**
* 赋值给弹出框
*/
$(".popmsg").html(msg);
// 转盘转动
$("#go").unbind('click').css("cursor", "default");
$("#outer").rotate({ //inner内部指针转动，outer外部转盘转动
// 指针转动
// $("#outer").unbind('click').css("cursor", "default");
// $("#go").rotate({ //inner内部指针转动，outer外部转盘转动
duration : 6000, //转动时间
angle : 0, //开始角度
animateTo : 360*5 + angle, //转动角度
// easing : $.easing.easeOutSine, //动画扩展
callback : function() {
if( prizeType == 0 ){
// 未中奖弹出框
$(".popboxmax").css("display","none");
$(".popboxwin").css("display","none");
$(".popboxnull").css("display","block");
$(".popsee").css("display","block");
}else{
$(".popboxnull").css("display","none");
$(".popboxmax").css("display","none");
$(".popboxwin").css("display","block");
// 中奖弹出框
if ( prizeType == 3) {
$(".popsee").css("display","none");
$(".popsee_a").css("display","block");
} else {
$(".popsee").css("display","block");
$(".popsee_a").css("display","none");
}
}
$(".popbox").css("display","block");
$(".popmsg").text(msg);
if (num!=0) {
$("#go").click(function() {
havachanges();
});
// 恢复转盘
$("#go").css("display","block");
return false;
}
}
});
}else if(resultCode=="1100"){
var data = response.retData;
// 次数用完弹出框
// $(".popboxnull").css("display","none");
// $(".popboxwin").css("display","none");
// $(".popboxmax").css("display","block");
alert(data);
}else{
alert("活动有点火爆,请您稍后再试!");
}
havaallchanges(userId);
// 恢复转盘
$("#go").css("display","block");
}
});
}
}