Flask接口签名sign原理与实例代码浅析
221
2023-07-29
手机端转盘抽奖代码分享
演示效果如下:
不废话了,直接给大家贴代码了。
html部分
<td tag="13" class="even">
<td tag="9" class="even">
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;
}
}
})
以上就是本文给大家分享的手机端转盘抽奖代码分享,希望大家喜欢。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~