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('您没有抽奖机会了')
                }
            }
        })
  • 相关阅读:
    MFC加载图片
    动态数组类
    MFC程序打包方法
    如何在C++中使用动态三维数组
    Ansys热应力计算
    像使用数据库一样使用xml
    过年回家的一点感想
    前后端框架和设计模式
    国外支付PayPal
    可重用的管理后台代码
  • 原文地址:https://www.cnblogs.com/phpfensi/p/7298586.html
Copyright © 2011-2022 走看看