js抽奖中红包专题

来源:https://www.sucaihuo.com/js/889.html 2016-07-01 22:21浏览(2048) 收藏

点击中间的转盘开始,就会立即抽奖,最好弹出一个中奖红包弹出层,金额是随机,这个数据最好在后台控制,前台用来展示。
js抽奖中红包专题
分类:抽奖 > 转盘 难易:中级
查看演示 下载资源 下载积分: 106 积分

抽奖html代码

<div class="turntable-bg">
    <div class="pointer"><img src="images/pointer.png" alt="pointer"/></div>
    <div class="rotate" ><img id="rotate" src="images/turntable.png" alt="turntable"></div>
</div>

抽奖奖项设置和转盘转动角度

var rotateTimeOut = function() {
    $('#rotate').rotate({
        angle: 0,
        animateTo: 2160,
        duration: 8000,
        callback: function() {
            alert('网络超时,请检查您的网络设置!');
        }
    });
};
var bRotate = false;

var rotateFn = function(awards, angles, txt) {
    bRotate = !bRotate;
    $('#rotate').stopRotate();
    $('#rotate').rotate({
        angle: 0,
        animateTo: angles + 1800,
        duration: 8000,
        callback: function() {
            /*alert(txt);*/
            swal({title: "获得" + txt + "红包", imageUrl: "images/gx.png"});

            bRotate = !bRotate;
        }
    })
};

document.onkeydown = function(event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];

    if (e && e.keyCode == 32) { // enter 键
        $('showSweetAlert').css("display", "none");
        $('sweet-overlay').css("display", "none");

        if (bRotate)
            return;
        var item = rnd(1, 5);

        switch (item) {
            case 1:
                //var angle = [26, 88, 137, 185, 235, 287, 337];
                rotateFn(1, 55, '888元');
                break;
            case 2:
                //var angle = [88, 137, 185, 235, 287];
                rotateFn(2, 140, '388元');
                break;
            case 3:
                //var angle = [137, 185, 235, 287];
                rotateFn(3, 199, '188元');
                break;
            case 4:
                //var angle = [137, 185, 235, 287];
                rotateFn(4, 269, '88元');
                break;
            case 5:
                //var angle = [185, 235, 287];
                rotateFn(5, 341, '8元');
                break;

        }

        console.log(item);

    }
};

$('.pointer').click(function() {

    if (bRotate)
        return;
    var item = rnd(1, 5);

    switch (item) {
        case 1:
            //var angle = [26, 88, 137, 185, 235, 287, 337];
            rotateFn(1, 55, '888元');
            break;
        case 2:
            //var angle = [88, 137, 185, 235, 287];
            rotateFn(2, 140, '388元');
            break;
        case 3:
            //var angle = [137, 185, 235, 287];
            rotateFn(3, 199, '188元');
            break;
        case 4:
            //var angle = [137, 185, 235, 287];
            rotateFn(4, 269, '88元');
            break;
        case 5:
            //var angle = [185, 235, 287];
            rotateFn(5, 341, '8元');
            break;

    }
});
标签: 抽奖转盘红包
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2