国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

抽紅包

荊兆峰 / 2820人閱讀

摘要：效果網絡問題上傳不了動態圖片獲得獎金元元元元提示恭喜你抽到現金紅包關閉對話框抽獎元函數抽獎函數循環紅包數量默認索引總次數總圈數剩余次數元

效果(網絡問題上傳不了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


    

        
獲得獎金

        
    
            
  • 0
    • 
            
  • 0
    • 
        

    

    
    
        
    • 
        
    • 
        
    • 
        
    • 
        
    • 
        
    • 
        
    • 
        
    • 
        
    • 
        
    • 
        
    • 
        
    • 
        
    • 
        
    • 
    

    
    
        
  • 5元
    • 
        
  • 10元
    • 
        
  • 15元
    • 
        
  • 20元
    • 
    

    GO






    

        
        
        

            恭喜你抽到現金紅包

JS

// 關閉對話框
$(".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);
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88262.html

相關文章

  • 大話后端開發的奇淫技巧大集合

    摘要：，大家好，很榮幸有這個機會可以通過寫博文的方式，把這些年在后端開發過程中總結沉淀下來的經驗和設計思路分享出來模塊化設計根據業務場景，將業務抽離成獨立模塊，對外通過接口提供服務，減少系統復雜度和耦合度，實現可復用，易維護，易拓展項目中實踐例子 Hi，大家好，很榮幸有這個機會可以通過寫博文的方式，把這些年在后端開發過程中總結沉淀下來的經驗和設計思路分享出來 模塊化設計 根據業務場景，將業務...

    CloudwiseAPM 評論0 收藏0

  • 如何設計一個百萬級用戶的抽獎系統？

    摘要：如下圖所示負載均衡層的限流防止用戶重復抽獎首先第一次在負載均衡層可以做的事情，就是防止重復抽獎。然后負載均衡感知到了之后，后續請求全部攔截掉返回一個抽獎結束的標識就可以了。一旦抽獎結束，抽獎服務更新狀態，負載均衡層會感知到。公眾號：貍貓技術窩作者：愛釣魚的桌子哥，資深架構師1、抽獎系統的背景引入本文給大家分享一個之前經歷過的抽獎系統的流量削峰架構的設計方案。抽獎、搶紅包、秒殺，這類系統其實都...

    Leck1e 評論0 收藏0

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

    摘要：源碼鏈接進階持久化插件有同學可能會問，我對不是很熟悉亦或者覺得單機存儲并不是安全，有沒有支持分布式數據存儲的插件呢，比如某爸的云數據庫答案當然是有咯，良心的我當然是幫你們都找好咯。 這次把這部分內容提到現在寫，是因為這段時間開發的項目剛好在這一塊遇到了一些難點，所以準備把經驗分享給大家，我們在使用Akka時，會經常遇到一些存儲Actor內部狀態的場景，在系統正常運行的情況下，我們不需要...

    miguel.jiang 評論0 收藏0

  • VmShell：國慶期間每日免費抽送虛擬(實體)VISA環球金卡!免費用戶抽獎/affman免費領

    摘要：怎么樣是一家注冊在美國加州的純外資企業，年開始經營一家專業的小型虛擬主機公司，其中包括共享主機，和經銷商主機。此外，對其主機具有嚴格的資源限制。的洛杉磯和英國的客戶服務反映出其良好的速度其中云計算主要經營香港線路和美國的三網線路。vmshell怎么樣?vmshell Inc是一家注冊在美國加州的純外資企業，Vmshell Inc 2021年開始經營一家專業的小型虛擬主機公司，其中包括共享主機...

    defcon 評論0 收藏0

發表評論

0條評論

荊兆峰

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<