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

浙公网安备 33010602011771号