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('您没有抽奖机会了')
            }
        }
    })

 

posted @ 2017-08-07 12:54  壁虎漫步.  阅读(342)  评论(0编辑  收藏  举报