HTML手机签到转盘抽奖页面模板,手机端转盘抽奖代码分享

演示效果如下：

不废话了，直接给大家贴代码了。

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;

}

}

})

以上就是本文给大家分享的手机端转盘抽奖代码分享，希望大家喜欢。