欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

手机端转盘抽奖代码分享_javascript技巧

程序员文章站 2022-03-16 15:29:45
...
演示效果如下:

手机端转盘抽奖代码分享_javascript技巧

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

html部分

手机端转盘抽奖代码分享_javascript技巧 手机端转盘抽奖代码分享_javascript技巧 手机端转盘抽奖代码分享_javascript技巧 手机端转盘抽奖代码分享_javascript技巧
手机端转盘抽奖代码分享_javascript技巧 手机端转盘抽奖代码分享_javascript技巧 手机端转盘抽奖代码分享_javascript技巧
手机端转盘抽奖代码分享_javascript技巧 手机端转盘抽奖代码分享_javascript技巧
手机端转盘抽奖代码分享_javascript技巧 手机端转盘抽奖代码分享_javascript技巧
手机端转盘抽奖代码分享_javascript技巧 手机端转盘抽奖代码分享_javascript技巧 手机端转盘抽奖代码分享_javascript技巧 手机端转盘抽奖代码分享_javascript技巧

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;
 }
 }
})

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