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




发表评论

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