跑马灯抽奖的简单实现

Posted 2020-09-02
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跑马灯抽奖的简单实现相关的知识，希望对你有一定的参考价值。
默认写死的中奖号码，不怎么会写后台没有取，简单的实现功能，很多地方还需要完善
基本实现思路更改设置运动圈数，根据圈数改变速度
<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta user-scalable="no">
        <title></title>
        <style>
            #lottery {
                width: 570px;
                height: 510px;
                margin: 0px auto;
                border: 4px solid #ba1809;
                position: relative;
            }
            
            #lottery table {
                background-color: yellow;
            }
            
            #lottery table td {
                position: relative;
                width: 190px;
                height: 170px;
                text-align: center;
                color: #333;
                font-index: -999
            }
            
            #lottery table td img {
                display: block;
                width: 190px;
                height: 170px;
            }
            
            #lottery table td a {
                width: 190px;
                height: 170px;
                display: block;
                text-decoration: none;
                background: rgba(233, 233, 233, .1) no-repeat top center;
            }
            
            #lottery table td a:hover {
                background: rgba(0, 0, 0, .2);
            }
            
            #lottery table td.active .mask {
                display: block;
            }
            
            .mask {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background-color: rgba(252, 211, 4, 0.5);
                display: none;
            }
            
            .integral {
                position: absolute;
                left: -140px;
                bottom: 10px;
                color: #000;
                height: 60px;
                border: 2px solid #399;
                min-width: 60px;
                text-align: center;
                line-height: 60px;
                font-size: 20px;
            }
        </style>
    </head>

    <body class="keBody">
        <!--效果html开始-->
        <div id="lottery">
            <span class="integral"></span>
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td class="prize prize-0"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/170914k2kzk3j23zs511k3.jpg">
                        <div class="mask"></div>
                    </td>
                    <td class="prize prize-1"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/170914u53gnv0w3t2ks42s.jpg">
                        <div class="mask"></div>
                    </td>
                    <td class="prize prize-2"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/170914fdzsfan2n23r3ady.jpg">
                        <div class="mask"></div>
                    </td>
                </tr>
                <tr>
                    <td class="prize prize-7"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/170914jo004r5okr44rre0.jpg">
                        <div class="mask"></div>
                    </td>
                    <td>
                        <a href="#" id="btn"></a>
                    </td>
                    <td class="prize prize-3"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/170914n3vci3x30u720x03.jpg">
                        <div class="mask"></div>
                    </td>
                </tr>
                <tr>
                    <td class="prize prize-6"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/170914n3vci3x30u720x03.jpg">
                        <div class="mask"></div>
                    </td>
                    <td class="prize prize-5"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/170914fdzsfan2n23r3ady.jpg">
                        <div class="mask"></div>
                    </td>
                    <td class="prize prize-4"><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/170914k2kzk3j23zs511k3.jpg">
                        <div class="mask"></div>
                    </td>
                </tr>
            </table>
        </div>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            function Lottery(id) {
                this.index = -1; //当前位置索引
                this.count = 0; //总共位置
                this.timer = null; //
                this.speed = 60; //初始转动速度
                this.times = 0; //转动次数
                this.cycle = 30; //转动基本次数：即至少需要转动多少次再进入抽奖环节
                this.prize = 3; //中奖位
                this.id = id; //盒子id
                this.obj = $("#" + this.id);
                this.units = this.obj.find(".prize");
                this.count = this.units.length;
                this.isClick = false;
                this.drain = 100; //积分
            }
            Lottery.prototype = {
                //当前状态
                setState: function() {
                    if(this.count > 0) {
                        this.obj.find(".prize-" + this.index).addClass("active");
                    }
                },
                //索引改变
                changeIndex: function() {
                    this.units.removeClass(‘active‘);
                    this.index++;
                    if(this.index > this.count - 1) {
                        this.index = 0;
                    }
                    this.setState();
                },
                //运动
                rotate: function() {
                    var that = this;
                    clearTimeout(that.timer);
                    if(typeof(that.rotate) == ‘function‘) {
                        that.timer = setTimeout(function() {
                            that.rotate();
                        }, that.speed);
                    }
                    that.changeIndex();
                    that.times++;
                    that.judge();
                },
                //判断加减速和是否停止
                judge: function() {

                    // 完成
                    if(this.times > this.cycle && this.index == this.prize) {
                        var that = this;
                        clearTimeout(that.timer);
                        that.timer = null;
                        this.times = 0;
                        this.speed = 60;
                        this.index = -1;

                        clearTimeout(that.click);
                        that.click = setTimeout(function() {
                            that.alertPrize(that.prize);
                        }, 100);

                    }
                    
                    //快接近 减速
                    if(this.times > this.cycle && ((this.prize == 1 && this.index == 5) || this.prize == this.index + 3)) {
                        this.speed += 180;
                    } 
                    else {
                        this.speed += 3;
                    }
                },
                //成功提示信息
                alertPrize: function(prize) {
                    var that = this,
                        alertTxt;
                    switch(prize) {
                        case 3:
                            that.isClick = false;
                            alert(‘恭喜获得。。。。‘);
                            break;
                    }
                },
                //中奖礼品
                getPrize: function(url, json) {
                    var that = this;
                    $.ajax({
                        url: url,
                        data: json,
                        dataType: ‘json‘,
                        type: ‘post‘,
                        success: function(res) {

                        },
                        error: function() {

                        }
                    })
                },
                click: function() {
                    var btn = $(‘#btn‘),
                        that = this,
                        integralbox = $(‘.integral‘);
                    var integral = $.trim(integralbox.text()); //积分
                    integral = 200;
                    integralbox.text(integral);
                    btn.on(‘click‘, function() {
                        if(that.isClick) return;
                        that.isClick = true;
                        if(integral < that.drain) {
                            alert(‘您的积分不足‘);
                            that.isClick = false;
                            return;
                        } else {
                            integral -= that.drain;
                            integralbox.text(integral);
                            //                    that.getPrize();
                            that.rotate();
                        }
                    })
                },
                init: function() {
                    this.setState();
                    this.click();
                }
            };
            $(function() {
                var lottery = new Lottery(‘lottery‘);
                lottery.init();
            });
        </script>

    </body>

</html>
以上是关于跑马灯抽奖的简单实现的主要内容，如果未能解决你的问题，请参考以下文章
iOS 抽奖轮盘跑马灯边框的实现
iOS 抽奖轮盘效果实现思路
JavaScript “跑马灯”抽奖活动代码解析与优化
九宫格跑马灯抽奖
Unity之跑马灯抽奖效果单抽与连抽
常见的跑马灯动图抽奖的案例