H5抽奖转盘

JS引用

jquery-3.2.1.min.js
jQueryRotate.2.2.js

效果图

HTML

<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");
            }
        });
    }
}