美文网首页
H5抽奖转盘

H5抽奖转盘

作者: Gxiner | 来源:发表于2017-09-13 17:54 被阅读0次
    JS引用

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

    效果图
    粘贴图片.png
    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");
                }
            });
        }
    }
    

    相关文章

      网友评论

          本文标题:H5抽奖转盘

          本文链接:https://www.haomeiwen.com/subject/afjlsxtx.html