jQuery九宫格抽奖

Html

Css

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

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jQuery九宫格抽奖



代码描述：代码很简单

简单的大转盘

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

brave heart

相关代码

jQuery九宫格抽奖

最新