jQuery帶次數帶彈窗的大轉盤抽獎代碼(支持h5)

clipboard.png

clipboard.png

html:javascript

<div class="g-content">html

<div class="g-lottery-case">
    <div class="g-left">
        <h2>您已擁有<span class="playnum"></span>次抽獎機會,點擊馬上抽獎!~</h2>
        <div class="g-lottery-box">
            <div class="g-lottery-img">

            </div>
            <a class="playbtn" href="javascript:;" title="開始抽獎"></a>
        </div>
    </div>
</div>

</div>
js:java

$(function() {
    var $btn = $('.playbtn');
    var $btn02 = $('.g-lottery-img');
    var $tan=$('#info');
    var playnum = 1; //初始次數,由後臺傳入
    $('.playnum').html(playnum);
    var isture = 0;
    var clickfunc = function() {
        var data = [1, 2, 3, 4, 5];
        //data爲隨機出來的結果,根據機率後的結果
        data = data[Math.floor(Math.random() * data.length)];
        switch(data) {
            case 1:
                rotateFunc(1, 36, '01');
                break;
            case 2:
                rotateFunc(2, 108, '02');
                break;
            case 3:
                rotateFunc(3, 180, '03');
                break;
            case 4:
                rotateFunc(4, 252, '04');
                break;
            case 5:
                rotateFunc(5, 324, '05');
                break;

        }
    }
    if(playnum>0)
    {
        $('.playbtn').addClass("playbtn02");

    }

    $btn.click(function() {
        if(isture) return; // 若是在執行就退出
        isture = true; // 標誌爲 在執行
        //先判斷是否登陸,未登陸則執行下面的函數
        if(1 == 2) {
            $('.playnum').html('0');
            alert("請先登陸");
            isture = false;
        } else { //登陸了就執行下面
            if(playnum <= 0) { //當抽獎次數爲0的時候執行
                alert("沒有次數了");

                $('.playnum').html(0);
                isture = false;
            } else { //還有次數就執行

                playnum = playnum - 1; //執行轉盤了則次數減1
                if(playnum <= 0) {
                    playnum = 0;
                }
                $('.playnum').html(playnum);
                clickfunc();
            }
        }
    });
    var rotateFunc = function(awards, angle, text) {
        isture = true;
        $btn.stopRotate();
        $btn02.rotate({
            angle: 0,
            duration: 4000, //旋轉時間
            animateTo: angle + 1440, //讓它根據得出來的結果加上1440度旋轉
            callback: function() {
                isture = false; // 標誌爲 執行完畢
                $('#info'+text).show();
                if(playnum <= 0) { //當抽獎次數爲0的時候執行
                    $('.playbtn').removeClass("playbtn02");
                }

            }
        });
    };
});

下載地址:https://u18725144.ctfile.com/...dom

相關文章
相關標籤/搜索