转盘抽奖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();


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

HTML:

<body style="margin: 0">
<div class="lottery_jf">
    <div class="lottery_index container">
        <a href="{:Url('/index/integral/index')}" >
            <div class="back_home">返回首页</div>
        </a>
        <div class="lottery_left">
            <a href="{:Url('/member/account/redcard')}" target="_blank">
                <span class="my_lott">我的奖品</span>
            </a>
            <!--顶部彩灯-->
            <div class="top_light">
                <ul>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                    <li></li>
                </ul>
            </div>

            <!--底部彩灯-->
            <div class="top_light bottom">
                <ul>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                    <li></li>
                </ul>
            </div>

            <!--奖项滚动-->
            <div class="lottery_box">
                <ul>
                    <li>
                        <span></span>
                        <b><img src="{$staticHost}{$data['jp'][0]['image']}" width="117" height="95px"></b>
                    </li>
                    <li>
                        <span></span>
                        <b><img src="{$staticHost}{$data['jp'][1]['image']}" width="117" height="95px"></b>
                    </li>
                    <li>
                        <span></span>
                        <b><img src="{$staticHost}{$data['jp'][2]['image']}" width="117" height="95px"></b>
                    </li>
                    <li>
                        <span></span>
                        <b><img src="{$staticHost}{$data['jp'][7]['image']}" width="117" height="95px"></b>
                    </li>
                    <li onclick="Start()">
                        <span></span>
                        <div class="msg_erro" style="display: none">
                            <i></i>
                            <b></b>
                            <div id="msg">{$data.message}</div>
                            <a href="{:Url('/index/integral/index')}#jf">赚积分</a>
                        </div>
                    </li>
                    <li>
                        <span></span>
                        <b><img src="{$staticHost}{$data['jp'][3]['image']}" width="117" height="95px"></b>
                    </li>
                    <li>
                        <span></span>
                        <b><img src="{$staticHost}{$data['jp'][6]['image']}" width="117" height="95px"></b>
                    </li>
                    <li>
                        <span></span>
                        <b><img src="{$staticHost}{$data['jp'][5]['image']}" width="117" height="95px"></b>
                    </li>
                    <li>
                        <span></span>
                        <b><img src="{$staticHost}{$data['jp'][4]['image']}" width="117" height="95px"></b>
                    </li>
                </ul>
            </div>

            <!--左侧彩灯-->
            <div class="top_light left">
                <ul>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                </ul>
            </div>

            <!--右侧彩灯-->
            <div class="top_light right">
                <ul>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                </ul>
            </div>
            <div style="clear: both"></div>
            <p class="rule">注:每次抽奖将消耗<b>{:abs($data.over)}积分</b> </p>
        </div>
        <div class="lottery_right">
            <h3>当前积分:<span id="toll">{$data.score}</span></h3>
            <span class="lottery_bg"></span>
            <!--奖品信息-->
            <div class="lottery_info">
                <b>抽奖说明 :</b>
                <ul>
                    <li>
                        <span>友链买卖商品推荐</span>
                        <p title="可以在友链买卖商品页推荐自己的1个商品">可以在友链买卖商品页推荐自己的1个商品</p>
                    </li>
                    <li>
                        <span>网站首页商品推荐</span>
                        <p title="可以在友链买卖商品页推荐自己的1个商品">可以在友链买卖商品页推荐自己的1个商品</p>
                    </li>
                    <li>
                        <span>免费换链商品推荐</span>
                        <p title="可以在友链买卖商品页推荐自己的1个商品">可以在免费换链商品页推荐自己的1个商品</p>
                    </li>
                    <li>
                        <span>站长工具页推荐</span>
                        <p title="可以在站长工具页推荐自己的1个商品">可以在站长工具页推荐自己的1个商品</p>
                    </li>
                </ul>
            </div>
            <span class="vip_bg"></span>
            <div class="lottery_vip ">
                <span>会员中奖榜</span>
                <ul class="jqjm_scrolls">
                    {volist name="data.jl" id="vo"}
                    <li>{$vo.account} 抽中了 {$vo.rname}</li>
                    {/volist}
                </ul>
            </div>
        </div>
    </div>
    <div style="clear: both"></div>
</div>

<div class="lottery__rule">
    <div class="container">
        <b style="padding-top: 77px;display: block">抽奖规则</b>
        <p>1、抽奖条件:每次抽奖需消耗200积分,抽奖用户的个人积分达到抽奖所需的数值即可参与抽奖。参与抽奖的用户、同一手机号、邮箱、账号等均视为同一用户条件;</p>
        <p>2、抽奖奖品:各奖品的使用规则依据各奖品的说明为准;</p>
        <p>3、奖品发放:抽奖所获得的红包/卡券将自动发送至个人中心处,可在<a href="{:Url('member/account/redcard')}">“会员中心-个人中心-红包/卡券”</a>处查看;</p>
        <p>4、抽奖概率:积分抽奖属于概率性事件,不能保证每个用户均能中奖;</p>
        <p>5、奖品有效期:各奖品的有效期依据各奖品的说明为准,重要提醒!!!请用户留意有效期和过期时间,逾期无效。</p>
    </div>
</div>
</div>
<!--<div class="lottery_bottom"></div>-->
<!--中奖和未中奖弹框-->
<div class="win_box" style="display: none">
    <div class="win_box1"></div>
    <div class="win_index">
        <i></i>
        <h3 id="info"></h3>
        <h3 id="product"></h3>
    </div>
</div>

</body>
<script type="text/javascript" src="/js/jquery.js?v={$version}"></script>
<script type="text/javascript" src="{$staticHost}/js/index/integral/integral_lottery.js?v={$version}"></script>
<script>
    var jqjm_scrolls = {go: 'top', obj: $('.jqjm_scrolls'), cons: 2, goTime: 1000, stopTime: 4000}
    scrollFun(jqjm_scrolls);
    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;
 $('#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_erro').show();
 $('#msg').html(msg);
}

/*关闭刷新*/
$(document).on('click','.msg_erro b',function(){
 window.location.href="/index/integral/integral_lottery.htm";
})

var Start=function($a){
 if(!clickBtn && !$a)return;
 clickBtn = false;
 if(tmpScore<over){
 isMsg('积分不足')
 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 = $('.lottery_box li span');
 //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;
 if(productName=="谢谢参与"){
 productName="再接再厉";
 $('#info').html('本次未中奖!')
 }else{
 $('#info').html('恭喜您,获得')
 }
 $('#product').html(productName)
 $('.win_box').show()
 init();
 return;
 }
 Start(true);
}
/*弹框关闭*/
$(document).on('click','.win_index i',function(){
    $('.win_box').hide();
})