抽红包

荆兆峰发布于2019-08-21 15:49 / 2805人阅读

摘要：效果网络问题上传不了动态图片获得奖金元元元元提示恭喜你抽到现金红包关闭对话框抽奖元函数抽奖函数循环红包数量默认索引总次数总圈数剩余次数元

效果(网络问题上传不了gif动态图片)

CSS

.zh-chb-main{position: relative;margin: 0.3rem 0.3rem 0;}
.zh-chb-main .zh-center{position: absolute;z-index: 2;left: 50%; top: 1.2rem;width: 3.6rem;height: 2.4rem;margin-left: -1.8rem;font-size: 0.3rem;color: #fff;text-align: center;}
.zh-chb-main .zh-center p{padding: 0.7rem 0 0.3rem;}
.zh-chb-main .zh-center ul{display: inline-block;}
.zh-chb-main .zh-center ul li{float: left;width: 0.8rem;height: 0.8rem;margin-left: -1px;border: 1px solid #FCCE01;font-size: 0.5rem;color: #FCCE01;text-align: center;line-height: 0.8rem;}
.zh-chb-main .zh-awards-list{position: relative;width: 6.75rem;height: 5.4rem;margin: 0 auto;}
.zh-chb-main .zh-awards-list li{position: absolute;width: 1.35rem;height: 1.35rem;background-color: #F7C29F;box-shadow: 0 0 0 1px #fff;}
.zh-chb-main .zh-awards-list .active:before{content: "";display: block;position: absolute;z-index: 2;left: 0;top: 0;width: 100%;height: 100%;border: 2px solid #f00;box-sizing: border-box;}
.zh-chb-main .zh-awards-list .zh-hb{width: 1.15rem;height: 1.15rem;margin: 0.1rem 0 0 0.1rem;border-radius: 10px;background-color: #CE1012;}
.zh-chb-main .zh-awards-list li:nth-of-type(1){left: 0;top: 0;}
.zh-chb-main .zh-awards-list li:nth-of-type(2){left: 1.35rem;top: 0;}
.zh-chb-main .zh-awards-list li:nth-of-type(3){left: 2.7rem;top: 0;}
.zh-chb-main .zh-awards-list li:nth-of-type(4){left: 4.05rem;top: 0;}
.zh-chb-main .zh-awards-list li:nth-of-type(5){left: 5.4rem;top: 0;}
.zh-chb-main .zh-awards-list li:nth-of-type(6){left: 5.4rem;top: 1.35rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(7){left: 5.4rem;top: 2.7rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(8){left: 5.4rem;top: 4.05rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(9){left: 4.05rem;top: 4.05rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(10){left: 2.7rem;top: 4.05rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(11){left: 1.35rem;top: 4.05rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(12){left: 0rem;top: 4.05rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(13){left: 0rem;top: 2.7rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(14){left: 0rem;top: 1.35rem;}
.zh-chb-main .zh-awards-list .zh-award-1a{background-image: url(../images/chb/img-chb-1a.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list .zh-award-1b{background-image: url(../images/chb/img-chb-1b.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list .zh-award-2a{background-image: url(../images/chb/img-chb-2a.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list .zh-award-2b{background-image: url(../images/chb/img-chb-2b.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list .zh-award-3a{background-image: url(../images/chb/img-chb-3a.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list .zh-award-3b{background-image: url(../images/chb/img-chb-3b.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list .zh-award-4a{background-image: url(../images/chb/img-chb-4a.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list .zh-award-4b{background-image: url(../images/chb/img-chb-4b.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list .zh-award-5{background-image: url(../images/chb/img-chb-5.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list2{height: 1.75rem;margin-top: 0.5rem;}
.zh-chb-main .zh-awards-list2 li {padding-bottom: 0.4rem;font-size: 0.3rem;color: #fff;text-align: center;}
.zh-chb-main .zh-awards-list2 li .zh-hb{margin-bottom: 0.05rem;color: #d5190d;}
.zh-chb-main .zh-awards-list2 li:nth-of-type(2){left: 1.8rem;}
.zh-chb-main .zh-awards-list2 li:nth-of-type(3){left: 3.6rem;}
.zh-chb-main .zh-awards-list2 li:nth-of-type(4){left: 5.4rem;}
.zh-chb-main .zh-go{display: block;width: 2rem;padding: 0.1rem 0;margin: 0.5rem auto;border-radius: 5px;background-color: #FCCE01;font-size: 0.5rem;color: #fff;text-align: center;}

HTML

// 关闭对话框
$(".zh-dialog .zh-close").click(function() {
    $(".zh-dialog").removeClass("active");
});

// 抽奖
$(".zh-go").click(function() {
    if(!$(this).hasClass("active")) {
        $(this).addClass("active");
        cjFn(this);
    }
});

// 元函数
function yuanFn(type) {
    switch(type) {
        case "1a":
            return "05";
            break;
        case "1b":
            return "10";
            break;
        case "2a":
            return "10";
            break;
        case "2b":
            return "20";
            break;
        case "3a":
            return "15";
            break;
        case "3b":
            return "30";
            break;
        case "4a":
            return "20";
            break;
        case "4b":
            return "40";
            break;
        case "5":
            return "00";
            break;
    }
}

// 抽奖函数
var prevIndex = 0;
function cjFn(goEle) {
    $("#zh_awards_list li").removeClass("open");
    // 循环
    var liNum = $("#zh_awards_list li").size(), // 红包数量
        index = prevIndex, // 默认索引
        acount = liNum*Math.round(Math.random()*2+1)+Math.round(Math.random()*liNum), // 总次数
        allTimes = Math.floor(acount/liNum), // 总圈数
        restTimes = acount%liNum; // 剩余次数
    var cjFlag = setInterval(function() {
        index++;
        if(allTimes > 0) {
            if(index==liNum) {
                index = 0;
                allTimes--;
            }
        } else {
            if(restTimes==0 || index==restTimes) {
                var activeEle = $("#zh_awards_list li").eq(index-1),
                    money = yuanFn(activeEle.attr("data-award"));
                $(".zh-chb-main .zh-center ul li:first").text(money.substr(0,1));
                $(".zh-chb-main .zh-center ul li:last").text(money.substr(1,1));
                $(".zh-chb-tips .zh-text strong").text((+money)+"元");
                $("#zh_chb").addClass("active");
                activeEle.addClass("open");
                $(goEle).removeClass("active");
                clearInterval(cjFlag);
            }
        }
        $("#zh_awards_list li").eq(index-1).addClass("active").siblings().removeClass("active");
        prevIndex = index;
    }, 50);
}

云服务器 GPU云服务器 php抽奖盘抽云服务器 js随机抽数 canal抽mysql表

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

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

大话后端开发的奇淫技巧大集合

摘要：，大家好，很荣幸有这个机会可以通过写博文的方式，把这些年在后端开发过程中总结沉淀下来的经验和设计思路分享出来模块化设计根据业务场景，将业务抽离成独立模块，对外通过接口提供服务，减少系统复杂度和耦合度，实现可复用，易维护，易拓展项目中实践例子 Hi，大家好，很荣幸有这个机会可以通过写博文的方式，把这些年在后端开发过程中总结沉淀下来的经验和设计思路分享出来模块化设计根据业务场景，将业务...

CloudwiseAPM 2019-08-06 13:33 评论0 收藏0
如何设计一个百万级用户的抽奖系统？

摘要：如下图所示负载均衡层的限流防止用户重复抽奖首先第一次在负载均衡层可以做的事情，就是防止重复抽奖。然后负载均衡感知到了之后，后续请求全部拦截掉返回一个抽奖结束的标识就可以了。一旦抽奖结束，抽奖服务更新状态，负载均衡层会感知到。公众号：狸猫技术窝作者：爱钓鱼的桌子哥，资深架构师1、抽奖系统的背景引入本文给大家分享一个之前经历过的抽奖系统的流量削峰架构的设计方案。抽奖、抢红包、秒杀，这类系统其实都...

Leck1e 2019-05-21 12:24 评论0 收藏0
Akka系列（七）：Actor持久化之Akka persistence

摘要：源码链接进阶持久化插件有同学可能会问，我对不是很熟悉亦或者觉得单机存储并不是安全，有没有支持分布式数据存储的插件呢，比如某爸的云数据库答案当然是有咯，良心的我当然是帮你们都找好咯。这次把这部分内容提到现在写，是因为这段时间开发的项目刚好在这一块遇到了一些难点，所以准备把经验分享给大家，我们在使用Akka时，会经常遇到一些存储Actor内部状态的场景，在系统正常运行的情况下，我们不需要...

miguel.jiang 2019-08-15 10:59 评论0 收藏0
VmShell：国庆期间每日免费抽送虚拟(实体)VISA环球金卡!免费用户抽奖/affman免费领

摘要：怎么样是一家注册在美国加州的纯外资企业，年开始经营一家专业的小型虚拟主机公司，其中包括共享主机，和经销商主机。此外，对其主机具有严格的资源限制。的洛杉矶和英国的客户服务反映出其良好的速度其中云计算主要经营香港线路和美国的三网线路。vmshell怎么样?vmshell Inc是一家注册在美国加州的纯外资企业，Vmshell Inc 2021年开始经营一家专业的小型虚拟主机公司，其中包括共享主机...

defcon 2021-09-29 09:46 评论0 收藏0