抽紅包

荊兆峰發(fā)布于2019-08-21 15:49 / 2825人閱讀

摘要：效果網(wǎng)絡(luò)問(wèn)題上傳不了動(dòng)態(tài)圖片獲得獎(jiǎng)金元元元元提示恭喜你抽到現(xiàn)金紅包關(guān)閉對(duì)話框抽獎(jiǎng)元函數(shù)抽獎(jiǎng)函數(shù)循環(huán)紅包數(shù)量默認(rèn)索引總次數(shù)總?cè)?shù)剩余次數(shù)元

效果(網(wǎng)絡(luò)問(wèn)題上傳不了gif動(dòng)態(tài)圖片)

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


    
        獲得獎(jiǎng)金
        
            0
            0
        
    
    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    
    
        
5元
        
10元
        
15元
        
20元
    
    GO




    
        
        
        
            恭喜你抽到現(xiàn)金紅包

// 關(guān)閉對(duì)話框
$(".zh-dialog .zh-close").click(function() {
    $(".zh-dialog").removeClass("active");
});

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

// 元函數(shù)
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;
    }
}

// 抽獎(jiǎng)函數(shù)
var prevIndex = 0;
function cjFn(goEle) {
    $("#zh_awards_list li").removeClass("open");
    // 循環(huán)
    var liNum = $("#zh_awards_list li").size(), // 紅包數(shù)量
        index = prevIndex, // 默認(rèn)索引
        acount = liNum*Math.round(Math.random()*2+1)+Math.round(Math.random()*liNum), // 總次數(shù)
        allTimes = Math.floor(acount/liNum), // 總?cè)?shù)
        restTimes = acount%liNum; // 剩余次數(shù)
    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云服務(wù)器云服務(wù)器 php抽獎(jiǎng)盤(pán) 抽云服務(wù)器 js隨機(jī)抽數(shù) canal抽mysql表

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88262.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

荊兆峰

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Tmwhost：七五折促銷(xiāo)BETA版本澳門(mén)VPS，1核1G內(nèi)存50G Raid5 SSD硬盤(pán)750G

閱讀 1332·2021-10-27 14:14
大廠的測(cè)試經(jīng)理們都在干什么呢？

閱讀 3583·2021-09-29 09:34
9102年，隔壁公司新來(lái)的女實(shí)習(xí)生問(wèn)我什么是TypeScript ？

閱讀 2488·2019-08-30 15:44
幾種常見(jiàn)的CSS布局

閱讀 1733·2019-08-29 17:13
JS面對(duì)對(duì)象，我要面對(duì)兩頭象

閱讀 2577·2019-08-29 13:07
vue 實(shí)現(xiàn)搜索的結(jié)果頁(yè)面支持全選與取消全選

閱讀 880·2019-08-26 18:26
Node.js

閱讀 3351·2019-08-26 13:44
前端筆試中兩道與節(jié)點(diǎn)有關(guān)的算法題

閱讀 3217·2019-08-26 13:37

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

抽紅包

相關(guān)文章

大話后端開(kāi)發(fā)的奇淫技巧大集合

如何設(shè)計(jì)一個(gè)百萬(wàn)級(jí)用戶的抽獎(jiǎng)系統(tǒng)？

Akka系列（七）：Actor持久化之Akka persistence

VmShell：國(guó)慶期間每日免費(fèi)抽送虛擬(實(shí)體)VISA環(huán)球金卡!免費(fèi)用戶抽獎(jiǎng)/affman免費(fèi)領(lǐng)

發(fā)表評(píng)論

0條評(píng)論

荊兆峰

男|高級(jí)講師

TA的文章

Tmwhost：七五折促銷(xiāo)BETA版本澳門(mén)VPS，1核1G內(nèi)存50G Raid5 SSD硬盤(pán)750G

大廠的測(cè)試經(jīng)理們都在干什么呢？

9102年，隔壁公司新來(lái)的女實(shí)習(xí)生問(wèn)我什么是TypeScript ？

幾種常見(jiàn)的CSS布局

JS面對(duì)對(duì)象，我要面對(duì)兩頭象

vue 實(shí)現(xiàn)搜索的結(jié)果頁(yè)面支持全選與取消全選

Node.js

前端筆試中兩道與節(jié)點(diǎn)有關(guān)的算法題

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

抽紅包

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！