资讯专栏INFORMATION COLUMN

jQuery带次数带弹窗的大转盘抽奖代码(支持h5)

PumpkinDylan / 1266人阅读

摘要:您已拥有次抽奖机会,点击立刻抽奖开始抽奖初始次数,由后台传入为随机出来的结果,根据概率后的结果如果在执行就退出标志为在执行先判断是否登录未登录则执行下面的函数请先登录登录了就执行下面当抽奖次数为的时候执行没有次数了还有次

html:

您已拥有次抽奖机会,点击立刻抽奖!~


js:

$(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/...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103108.html

相关文章

  • jQuery次数的大转盘抽奖代码支持h5

    摘要:您已拥有次抽奖机会,点击立刻抽奖开始抽奖初始次数,由后台传入为随机出来的结果,根据概率后的结果如果在执行就退出标志为在执行先判断是否登录未登录则执行下面的函数请先登录登录了就执行下面当抽奖次数为的时候执行没有次数了还有次 showImg(https://segmentfault.com/img/bVbqAdu); showImg(https://segmentfault.com/img...

    lemon 评论0 收藏0
  • jQuery次数的大转盘抽奖代码支持h5

    摘要:您已拥有次抽奖机会,点击立刻抽奖开始抽奖初始次数,由后台传入为随机出来的结果,根据概率后的结果如果在执行就退出标志为在执行先判断是否登录未登录则执行下面的函数请先登录登录了就执行下面当抽奖次数为的时候执行没有次数了还有次 showImg(https://segmentfault.com/img/bVbqAdu); showImg(https://segmentfault.com/img...

    Hydrogen 评论0 收藏0
  • jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

    摘要:需求抽奖代码最多可以抽奖次,而且,每次只会中元理财金或者谢谢参与,其它的不会抽中哈哈,果然都是套路。需求: 抽奖代码最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路)。 效果如下: 一、页面结构: ? 1 2 3 4 5 6 7 8 9 10 11 12 您已...

    番茄西红柿 评论0 收藏0
  • HTML5 Canvas圆盘抽奖应用DEMO

    摘要:圆盘抽奖应用页面圆盘抽奖应用演示抱歉浏览器不支持。 HTML5 Canvas圆盘抽奖应用DEMO html页面 HTML5 Canvas圆盘抽奖应用DEMO演示 抱歉!浏览器不支持。 抱歉!浏览器不支持。 抱歉!浏览器...

    sunsmell 评论0 收藏0

发表评论

0条评论

PumpkinDylan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<