js抽奖中红包专题

收藏

点击中间的转盘开始，就会立即抽奖，最好弹出一个中奖红包弹出层，金额是随机，这个数据最好在后台控制，前台用来展示。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

抽奖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;

    }
});