zoukankan      html  css  js  c++  java
  • jQuery九宫格抽奖

    <div id="box">
            <div class="content content-1">1</div>
            <div class="content content-2">2</div>
            <div class="content content-3">3</div>
            <div class="content content-8">8</div>
            <div class="content content-click">
                <div id="text">
                    <div>点击抽奖</div>
                    <div>您还有<span class="number">3</span>次抽奖机会</div>
                </div>
            </div>
            <div class="content content-4">4</div>
            <div class="content content-7">7</div>
            <div class="content content-6">6</div>
            <div class="content content-5">5</div>
        </div>
    #box {
        width:45%;
        perspective:1200px;
        float:left;
        margin-left:30%;
    }
    .content {
        float:left;
        width:30%;
        border:1px solid red;
        display:flex;
        flex-direction:row;
        justify-content:center;
        align-items:center;
        font-size:24px;
        color:red;
    }
    .content-click {
        background:rgba(139,0,0,0.6);
        color:white;
        font-size:18px;
        text-align:center;
        cursor:pointer;
        display:flex;
        flex-direction:column;
        justify-content:center;
    }
    .content-click:hover {
        background:rgba(139,0,0,1);
    }
    .active {
        background:goldenrod;
        color:white;
    }
    $('.content').height($('.content').width()+'px')
        $(window).resize(function(){
            $('.content').height($('.content').width()+'px')
        })
        function time(a){
            return function(){
                if(a>8){
                    a=parseInt(a%8)
                    if(a==0){
                        a=8
                    }
                }
                $('.content').removeClass('active');
                $('.content-'+a).addClass('active');
            }
        }
    //    在旋转的时候不能再次被点击
        var t=true
        $('.content-click').click(function(){
            if(t){
                t=false;
    //            产生随机数
                var prize=Math.ceil(Math.random()*($('.content').length-1));
    //            控制概率,永远不是8
                if(prize==8){
                    prize=Math.ceil(Math.random()*($('.content').length-2));
                }
                if($('.number').html()>0){
                    $('.number').html($('.number').html()-1)
    //                默认先转3圈
                    prize+=32
                    for(var i=1;i<=prize;i++){
                        setTimeout(time(i),6*i*i);
                    }
                    setTimeout(function(){
                        t=true;
                    },6*prize*prize)
                }else{
                    alert('您没有抽奖机会了')
                }
            }
        })
  • 相关阅读:
    bzoj1066: [SCOI2007]蜥蜴
    bzoj3504: [Cqoi2014]危桥
    bzoj2756: [SCOI2012]奇怪的游戏
    bzoj1570: [JSOI2008]Blue Mary的旅行
    Ultra-QuickSort
    Bin Packing
    Watering Grass
    区间覆盖
    抄书 Copying Books UVa 714
    分馅饼 Pie
  • 原文地址:https://www.cnblogs.com/phpfensi/p/7298586.html
Copyright © 2011-2022 走看看