h5頁面轉盤抽獎


 var playnum = 5; //初始次數,由後臺傳入
    var isture = 0;
    var newdraw = new turntableDraw('#lotteryPic', {
        share: 9,
        speed: "3s",
        velocityCurve: "ease",
        weeks: 6,
        callback: function (num) {
            callbackA(num);
        },
    });
    $("#arrows").click(function (event) {
        if (isture) return; // 如果在執行就退出
        isture = true; // 標誌爲 在執行
        //先判斷是否登錄,未登錄則執行下面的函數
        if ($('#login').length > 0) {
            login();
        } else { //登錄了就執行下面
            if (playnum <= 0) {
                notrophy();
                isture = false;
            } else {
                playnum = playnum - 1; //執行轉盤了則次數減1
                if (playnum <= 0) {
                    playnum = 0;
                }
                var data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
                //data爲根據概率後的結果
                data = data[Math.floor(Math.random() * data.length)];
                newdraw.goto(data);1,2,3,4,5,6,7,8,9表示圖片逆時針從箭頭數
            }
        }
    });

function callbackA(num) {
        var data = 0;
        if (num == 1) {
            data = 1;
        } else if (num == 2) {
            data = 5;
        } else if (num == 3) {
            data = 6;
        } else if (num == 4) {
            data = 4;
        } else if (num == 5) {
            data = 7;
        } else if (num == 6) {
            data = 3;
        } else if (num == 7) {
            data = 9;
        } else if (num == 8) {
            data = 2;
        } else if (num == 9) {
            data = 8;
        }
        var $trophy = $('.trophy');
        if (data == 1) {
            setTimeout(function () {
                $trophy.find('h2').text('中獎啦!').end()
                       .find('img').attr('src', '/images/Turntable/t04.png').removeClass('regret').end()
                       .find('p').text('恭喜您,獲得大疆無人機一臺!');
                hj();
            }, 30);
        }
        if (data == 2) {
            setTimeout(function () {
                $trophy.find('h2').text('中獎啦!').end()
                       .find('img').attr('src', '/images/Turntable/t05.png').removeClass('regret').end()
                       .find('p').text('恭喜您,獲得小米電視一臺!');
                hj();
            }, 30);
        }
        if (data == 3) {
            setTimeout(function () {
                $trophy.find('h2').text('中獎啦!').end()
                       .find('img').attr('src', '/images/Turntable/t06.png').removeClass('regret').end()
                       .find('p').text('恭喜您,獲得九陽原汁機一臺!');
                hj();
            }, 30);
        }
        if (data == 4) {
            setTimeout(function () {
                $trophy.find('h2').text('中獎啦!').end()
                       .find('img').attr('src', '/images/Turntable/t07.png').removeClass('regret').end()
                       .find('p').text('恭喜您,獲得格力空調扇一臺!');
                hj();
            }, 30);
        }
        if (data == 5) {
            setTimeout(function () {
                $trophy.find('h2').text('中獎啦!').end()
                       .find('img').attr('src', '/images/Turntable/t08.png').removeClass('regret').end()
                       .find('p').text('恭喜您,獲得美的電烤箱一臺!');
                hj();
            }, 30);
        }
        if (data == 6) {
            setTimeout(function () {
                $trophy.find('h2').text('中獎啦!').end()
                       .find('img').attr('src', '/images/Turntable/t09.png').removeClass('regret').end()
                       .find('p').text('恭喜您,獲得小米充電寶一個!');
                hj();
            }, 30);
        }
        if (data == 7) {
            setTimeout(function () {
                $trophy.find('h2').text('中獎啦!').end()
                       .find('img').attr('src', '/images/Turntable/t10.png').removeClass('regret').end()
                       .find('p').text('恭喜您,獲得50元話費券一張!');
                hj();
            }, 30);
        }
        if (data == 8) {
            setTimeout(function () {
                $trophy.find('h2').text('中獎啦!').end()
                     .find('img').attr('src', '/images/Turntable/t11.png').removeClass('regret').end()
                     .find('p').text('恭喜您,獲得5元返金券一張!');
                hj();
            }, 30);
        }
        if (data == 9) {
            setTimeout(function () {
                $trophy.find('h2').text('很遺憾~').end()
                       .find('img').attr('src', '/images/Turntable/t03.png').addClass('regret').end()
                       .find('p').text('本次未中獎,謝謝參與');
                hj();
            }, 30);
        };
        isture = false; // 標誌爲 執行完畢
    };


function turntableDraw(obj, jsn) {
    "use strict";
    this.draw = {};
    this.draw.obj = $(obj);
    this.draw.objClass = $(obj).attr("class");
    this.draw.newClass = "rotary" + "new" + parseInt(Math.random() * 1000);
    var _jiaodu = parseInt(360 / jsn.share);
    var _yuan = 360 * (jsn.weeks || 4);
    var _str = "";
    var _speed = jsn.speed || "2s";
    var _velocityCurve = jsn.velocityCurve || "ease";
    var _this = this;
    for (var i = 1; i <= jsn.share; i++) {
        _str += "." + this.draw.newClass + i + "{";
        _str += "transform:rotate(" + ((i - 1) * _jiaodu + _yuan) + "deg);";
        _str += "-ms-transform:rotate(" + ((i - 1) * _jiaodu + _yuan) + "deg);";
        _str += "-moz-transform:rotate(" + ((i - 1) * _jiaodu + _yuan) + "deg);";
        _str += "-webkit-transform:rotate(" + ((i - 1) * _jiaodu + _yuan) + "deg);";
        _str += "-o-transform:rotate(" + ((i - 1) * _jiaodu + _yuan) + "deg);";
        _str += "transition: transform " + _speed + " " + _velocityCurve + ";";
        _str += "-moz-transition: -moz-transform " + _speed + " " + _velocityCurve + ";";
        _str += "-webkit-transition: -webkit-transform " + _speed + " " + _velocityCurve + ";";
        _str += "-o-transition: -o-transform " + _speed + " " + _velocityCurve + ";";
        _str += "}";
        _str += "." + this.draw.newClass + i + "stop{";
        _str += "transform:rotate(" + ((i - 1) * _jiaodu) + "deg);";
        _str += "-ms-transform:rotate(" + ((i - 1) * _jiaodu) + "deg);";
        _str += "-moz-transform:rotate(" + ((i - 1) * _jiaodu) + "deg);";
        _str += "-webkit-transform:rotate(" + ((i - 1) * _jiaodu) + "deg);";
        _str += "-o-transform:rotate(" + ((i - 1) * _jiaodu) + "deg);";
        _str += "}";
    };
    $(document.head).append("<style>" + _str + "</style>");
    _speed = _speed.replace(/s/, "") * 1000;
    this.draw.startTurningOk = false;
    this.draw.goto = function (ind) {
        if (_this.draw.startTurningOk) { return false };
        _this.draw.obj.attr("class", _this.draw.objClass + " " + _this.draw.newClass + ind);
        _this.draw.startTurningOk = true;
        setTimeout(function () {
            _this.draw.obj.attr("class", _this.draw.objClass + " " + _this.draw.newClass + ind + "stop");
            if (jsn.callback) {
                _this.draw.startTurningOk = false;
                jsn.callback(ind);
            };
        }, _speed + 10);
        return _this.draw;
    };
    return this.draw;
};

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章