[Java教程]转盘抽奖
0 2015-09-09 12:00:06
html部分
![]() | ![]() | ![]() | ![]() |
![]() | ![]() | ![]() | |
![]() | ![]() | ||
![]() | ![]() | ||
![]() | ![]() | ![]() | ![]() |
css部分,由于做的这个转盘是手机端的,采用的响应式布局.turntableWap{ padding:1rem; background:url(../images/zpTabBg.jpg) no-repeat center; background-size:100% 100%;}.turntableWap table{ width:100%;}.turntableWap table td{ vertical-align:middle; text-align:center; background-color:#ecd295;}.turntableWap table td img{ width:100%; }.turntableWap table td.even{background-color:#f6e8c5}.turntableWap table td.active{ background-color:#ed9351;}
js部分$(".turntableWap .table").css({"height":$(".turntableWap .table").width()});//做响应式布局,外table是等宽高var isdo = true;$(".zpBtn").on("click",function(){ var num = 13;//后台传入的奖品 var rotaNum = 14;//奖品数量 var count = -1;//高亮显示,旋转特效 var jishi = 0;//计时时间段 var speed = 50;//快速速度 var speedSlow = 200;//慢速速度 choujiang()//抽奖方法调用,在此处做判断调用choujiang(),并给num值 function choujiang(){ if(isdo){ isdo=false; $(".turntableWap").css({"background-image":"url(../images/1.gif)"}) var c = setInterval(function(){ if(count >12){ count = -1; } count = count+1; jishi = jishi+1; $(".turntableWap td").removeClass("active"); $(".turntableWap td[tag="+count+"]").addClass("active"); if(jishi>rotaNum*2){ clearInterval(c); c = setInterval(function(){ count = count+1; jishi = jishi+1; $(".turntableWap td").removeClass("active"); $(".turntableWap td[tag="+count+"]").addClass("active"); if(jishi>num+rotaNum*2){ clearInterval(c); $(".turntableWap").css({"background-image":"url(../images/zpTabBg.jpg)"}) isdo = true; var jp = $(".turntableWap td[tag="+count+"]").find("img").attr("alt") alert("恭喜您获取"+jp) } },speedSlow) } },speed) }else{ return; } }})
本文网址:http://www.shaoqun.com/a/141898.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。
0