一个H5砸蛋抽奖，怎么设置抽奖概率呢？搞不懂啊。急急急！

soamu 2021-08-31 23:08:10

包含两个文件：index.js

$(function () {
    var $hammer = $("#hammer"),
        $tips = $(".info"),
        $eggList = $(".egg li"),//金蛋父级
        $egg = $(".goldegg"),//金蛋
        $change = $("#change"),//剩余次数
        length = $egg.length,
        data = {count: 9},//次数
        arr = [],
        openArr,//记录被砸开的蛋的下标数组
        rem = 75;

    /*轮流提示*/
    $(function () {
        if (!!$.cookie("eggIndex")) {//如果存在cookie，也就是有金蛋被砸开
            openArr = $.cookie("eggIndex").split(",");//将cookie变为数组
            for (var i = 0; i < openArr.length; i++) {
                arr.push(parseFloat(openArr[i]));//将上次cookie存入数组以免上次cookie被覆盖
                $egg.eq(parseFloat(openArr[i])).prop("src", "image/step3.png");
                $egg.eq(parseFloat(openArr[i])).removeClass("init");
                $egg.eq(parseFloat(openArr[i])).data("mark", false);//更改金蛋状态为已砸开
            }
        }

        //初始跳动
        $egg.eq(length).addClass("jump");
        $tips.eq(length).show();
        setInterval(function () {
            //金蛋跳动
            length++;
            length %= 9;
            $egg.eq(length - 1 < 0 && 8 || length - 1).removeClass("jump");
            $tips.eq(length - 1 < 0 && 8 || length - 1).hide();
            reback();
            $egg.eq(length).addClass("jump");
            $tips.eq(length).show();
        }, 1000);
    });

    //跳过砸开的金蛋
    function reback() {
        if (!$egg.eq(length).hasClass("init")) {//若已砸开
            length++;
            length %= 9;
            reback();
        }
    }

    /*砸蛋事件*/
    for (var i = 0; i < length; i++) {
        $egg.eq(i).data("mark", true);//判断金蛋是否砸开，true表示可砸
        $eggList.eq(i).data("i", i);
        $eggList.eq(i).click(function () {
            //设定剩余抽奖次数，判断用户是否还能点击
            if (data.count > 0) {
                $egg.eq($(this).data("i")).data("mark") ? eggChange($(this).data("i")) : alert("这枚金蛋已经被您砸开了");//判断金蛋是否已砸开
            } else {
                alert("您当前砸蛋次数为0，无法砸蛋");
            }
        });
    }

    /*砸蛋事件的处理*/
    function eggChange(i) {
        //砸蛋次数的变化
        data.count--;
        $change.html(data.count);
        $hammer.removeClass("shak");//清除锤子晃动动画
        //锤子砸蛋的位置
        (i === 0 || i === 3 || i === 6) && ($hammer.css("left", 165 / rem + "rem"));
        (i === 1 || i === 4 || i === 7) && ($hammer.css("left", 415 / rem + "rem"));
        (i === 2 || i === 5 || i === 8) && ($hammer.css("left", 665 / rem + "rem"));
        (i === 0 || i === 1 || i === 2) && ($hammer.css("top", 60 / rem + "rem"));
        (i === 3 | i === 4 || i === 5) && ($hammer.css("top", 280 / rem + "rem"));
        (i === 6 | i === 7 || i === 8) && ($hammer.css("top", 500 / rem + "rem"));
        //锤子返回
        setTimeout(function () {
            $hammer.css({
                left: 665 / rem + "rem",
                top: 60 / rem + "rem"
            });
        }, 1500);

        //金蛋破裂及锤子动画
        setTimeout(function () {
            $hammer.addClass("hit");
            setTimeout(function () {
                $egg.eq(i).prop("src", "image/step3.png");
            }, 300);
            setTimeout(function () {
                $egg.eq(i).removeClass("init");
                win();
                $hammer.removeClass("hit");//清除锤子砸蛋动画
                $hammer.addClass("shak");



                //记录被砸开的蛋
                arr.push(i);//存入每个砸开蛋的下标
                $.cookie("eggIndex", arr, {expires: 1});//存入cookie
            }, 600);
        }, 600);
        $egg.eq(i).data("mark", false);//更改金蛋状态为已砸开
    }

    //奖品展示
    var show = new Swiper(".swiper-container", {
        direction: "horizontal",//水平方向滑动。 vertical为垂直方向滑动
        loop: false,//是否循环
        slidesPerView: "auto"//自动根据slides的宽度来设定数量
    });
});

common.js

var $maskRule = $("#mask-rule"),//规则遮罩层
    $mask = $("#mask"),//红包遮罩层
    $winning = $(".winning"),//红包
    $card = $("#card"),
    $close = $("#close");
    //link = false;//判断是否在链接跳转中

//规则
$(".rule").click(function () {
    $maskRule.show();
});
$("#close-rule").click(function () {
    $maskRule.hide();
});

/*中奖信息提示*/
function win() {
    //遮罩层显示
    $mask.show();
    $winning.addClass("reback");
    setTimeout(function () {
        $card.addClass("pull");
    }, 500);

    //关闭弹出层
    $("#close,.win,.btn").click(function () {
    //$close.click(function () {
        $mask.hide();
        $winning.removeClass("reback");
        $card.removeClass("pull");
    });
    /*$(".win,.btn").click(function () {
        link = true;
    });*/
}

//此处可以在commonjs中合并
function queryString(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexS = "[\\?&]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(window.location.search);
    if(results === null) {
        return "";
    }
    else {
        return decodeURIComponent(results[1].replace(/\+/g, " "));
    }
}

...全文