JS引用
jquery-3.2.1.min.js
jQueryRotate.2.2.js
效果图
粘贴图片.pngHTML
<section>
<div class="outercont">
<div class="rules">![](${base}/resources/images/shopping/rules_1.png)</div>
<div class="outer-cont">
<!-- 转盘 -->
<div id="outer">
![](${base}/resources/images/shopping/draw_turntable.png)
</div>
<!-- 按钮 -->
<div id="inner">
![](${base}/resources/images/shopping/draw_oper.png)
</div>
<!--弹出框-->
<div class="popbox">
<!--中奖-->
<div class="popboxwin">
<p class="poptitle">
恭喜您! <span class="popclose">中奖了</span>
</p>
<p class="popmsg"></p>
<p>![](${base}/resources/images/shopping/gift.png)</p>
<p class="popsee">
<a href="javascript:void(0);" onclick="hidePopBox()">
![](${base}/resources/images/shopping/ok.png)
</a>
</p>
<p class="popsee_a">
<a href="javascript:void(0);" onclick="hidePopBox()">
![](${base}/resources/images/shopping/ok_a.png)
</a>
<a href="javascript:void(0);" onclick="toAppShopping()">
![](${base}/resources/images/shopping/use.png)
</a>
</p>
</div>
<!--未中奖继续游戏-->
<div class="popboxnull">
<p class="poptitle">
再接再厉 <span class="popclose"></span>
</p>
<p class="poptextmsg">好运总在下一次,不要放弃!</p>
<p>![](${base}/resources/images/shopping/gift_no.png)</p>
<p class="popsee">
<a href="javascript:void(0);" onclick="hidePopBox()">
![](${base}/resources/images/shopping/ok.png)
</a>
</p>
</div>
<!--抽奖次数达到上限-->
<div class="popboxmax">
<p class="poptitle">
您没有次数了<span class="popclose">×</span>
</p>
<p class="popchance">去做任务赚取抽奖次数吧</p>
<p>![](${base}/resources/images/shopping/gift_no.png)</p>
<p class="popnosee">
<a href="javascript:void(0);" onclick="hidePopBox()">
![](${base}/resources/images/shopping/ok.png)
</a>
</p>
</div>
</div>
<!--中奖纪录-->
<div class="torecord">
<a class="clickto" onclick="toMyRedPacket()">中奖记录</a>
</div>
</div>
</div>
<!--你今天还剩几次机会-->
<div style="text-align: center;">
<span>你还剩 <i class="count"></i> 次机会</span>
</div>
</section>
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");
}
});
}
}
网友评论