转盘抽奖HTML及js实现源码(h5)

HTML:

<body>
<div class="h5_bg"></div>
<div class="h5_Integral">
    <i class="jf_rule_btn"></i>
    <div class="jf_detail">
        <div style="padding: 0 1rem">
            <span>我的积分:<b id="toll">{$data.score}</b></span>
            <span class="float-right">每抽奖一次消耗{:abs($data.over)}积分</span>
        </div>
        <div class="jf_boxs">
            <ul>
                <li class="cur"><img src="{$staticHost}{$data['jp'][0]['image']}"> </li>
                <li><img src="{$staticHost}{$data['jp'][1]['image']}"> </li>
                <li><img src="{$staticHost}{$data['jp'][2]['image']}"> </li>
                <li><img src="{$staticHost}{$data['jp'][7]['image']}"> </li>
                <li class="jf_start" onclick="Start()" >
                    <img src="{$staticHost}/images/H5/home/start.png" width="100%">
                </li>
                <li><img src="{$staticHost}{$data['jp'][3]['image']}"> </li>
                <li><img src="{$staticHost}{$data['jp'][6]['image']}"> </li>
                <li><img src="{$staticHost}{$data['jp'][5]['image']}"> </li>
                <li><img src="{$staticHost}{$data['jp'][4]['image']}"> </li>
                <div style="clear: both"></div>
            </ul>
        </div>
    </div>
    <!--积分不足-->
    <div class="msg_index">
        <div class="jf_msg"></div>
        <div class="jf_indexs" id="msg">{$data.message}</div>
    </div>
</div>
<!--中奖及未中奖弹框-->
<div class="jf_success" style="display: none">
    <div class="jf_bg"></div>
    <div class="success_info">
        <i></i>
        <p></p>
        <ss>推荐卡已放入您账户,快去查看吧</ss>
        <div class="jf_btn" onclick="next()">继续抽奖</div>
    </div>
</div>

<!--积分规则-->
<div class="jf_rule" style="display: none">
    <div class="jf_bg"></div>
    <div class="rule_index">
        <p class="title_img"></p>
        <b class="title1"></b>
        <p>每次抽奖需<ss>消耗200积分</ss>,抽奖用户的个人积分达到抽奖所需的数值即可参与抽奖。参与抽奖的用户、同一手机号、邮箱、账号等均视为同一用户条件;</p>

        <b class="title2"></b>
        <p>各奖品的使用规则依据各奖品的说明为准;</p>

        <b class="title3"></b>
        <p>抽奖所获得的红包/卡券将自动发送至个人中心处,可在<ss>“会员中心-个人中心-红包/卡券”</ss>处查看;</p>

        <b class="title4"></b>
        <p>积分抽奖属于概率性事件,不能保证每个用户均能中奖;</p>

        <b class="title5"></b>
        <p>各奖品的有效期依据各奖品的说明为准,重要提醒!!!请用户留意有效期和过期时间,逾期无效。</p>
        <div class="jf_btns"></div>
    </div>
</div>

</body>
<script type="text/javascript" src="/js/jquery.js?v={$version}"></script>
<script type="text/javascript" src="{$staticHost}/js/member/account/h5_Integral.js?v={$version}"></script>
<script>
    var score = tmpScore  = {$data.score},over={:abs($data['over'])},product={:json_encode($ps)};
</script>
</html>


JS:

var productName = '';
function getDraw(){
    var url = '/index/integral/toDraw';
    var msg='';
    $.ajax(
        {
            url:url,
            dateType:"JSON",
            type:"GET",
            success:function(data){
                if(data.statusCode==200){
                    score = data.data.toll;
                    console.log(score)
                    $('#toll').html(score)
                    stopPosition = data.data.idKey-1;
                    productName = product[data.data.id];
                }else if(data.statusCode==500){
                    isMsg(data.data.message)
                }
            }
        }
    );
}


/*开奖动画*/
var curPosition;
var time
var stopPosition;
var re;
var lottery_start = [];
function init(){
    curPosition=0;//当前位置
    stopPosition =  -1;//停止位置
    time = 80 //动画时间
    re = 3; //开奖后再走三圈
    lottery_start = [0,1,2,5,8,7,6,3]; //定义开奖行走的轨迹
    clickBtn=true
}
init();

/*积分不足提示消息*/
function isMsg(msg){
    $('.msg_index').show();
    $('#msg').html(msg);
}


var Start=function($a){
    clearTimeout(sutoMoveTime);
    if(!clickBtn && !$a)return;
    clickBtn = false;
    if(tmpScore<over){
        isMsg('积分不足,快去做任务领积分吧')
        setTimeout(function(){
            window.location.href="/member/account/h5_Integral.htm";
        },3000)
        return;
    }
    if(!$a){
        getDraw();
    }
    setTimeout(function(){
        clearClass();
        if(curPosition<lottery_start.length-1){
            curPosition++;
        }else{
            curPosition=0;
            if(stopPosition!=-1){
                re--;
                switch (re){
                    case 2:
                        time = 100;
                        break;
                    case 1:
                        time = 200;
                        break;
                    case 0:
                        time = 300;
                        break
                }
            }
        }
    },time)
}
var clearClass=function(){
    var li = $('.jf_boxs li');
    //console.log(lottery_start[curPosition]);
    li.removeClass('cur')
    li.eq(lottery_start[curPosition]).addClass('cur');
    if((stopPosition*1) == (curPosition*1) && re==0 && stopPosition!=-1 ){
        tmpScore = score;
        $('.jf_success').show();
        if(productName=="谢谢参与"){
            productName="再接再厉";
            $('.success_info').css("backgroundImage","url(/images/H5/home/cry.png)")
            $('.success_info p').html('很遗憾,奖品溜走了!')
            $('.success_info ss').html('手气不好换个姿势再来一次')
        }else{
            $('.success_info p').html('获得'+productName)
            $('.success_info').css("backgroundImage","url(/images/H5/home/card.png)")
            $('.success_info p').css("color","#ff3333")
            $('.success_info ss').html('推荐卡已放入您账户,快去查看吧')
        }
        init();
        autoMove();
        return;
    }
    Start(true);
}


$(document).on('touchend','.success_info i',function(){
    $('.jf_success').hide()
})

/*积分规则显示隐藏*/
$(document).on('touchend','.jf_rule_btn',function(){
    $('.jf_rule').show()
})

$(document).on('touchend','.jf_btns',function(){
    $('.jf_rule').hide()
})



//继续抽奖
var next=function(){
    $('.jf_success').hide()
    Start();
}

var sutoMoveTime;

//自动移动
var autoMove=function(){
    sutoMoveTime = setTimeout(function(){
        var li = $('.jf_boxs li');
        li.removeClass('cur')
        li.eq(lottery_start[curPosition]).addClass('cur');
        autoMove();
        if(curPosition<lottery_start.length-1){
            curPosition++;
        }else{
            curPosition=0;
        }
    },1000)
}
autoMove();


发表评论

电子邮件地址不会被公开。 必填项已用*标注