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资料