手机端转盘抽奖代码分享


Posted in Javascript onSeptember 10, 2015

演示效果如下:

手机端转盘抽奖代码分享

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

html部分

<div class="turntableWap top10">
 <table border="0" cellspacing="0">
 <tr>
 <td tag="0"><img src="../images/4.png" alt="4元"></td>
 <td tag="1" class="even"><img src="../images/6.png" alt="6元"></td>
 <td tag="2"><img src="../images/8.png" alt="8元"></td>
 <td tag="3" class="even"><img src="../images/11.png" alt="11元"></td>
 </tr>
 <tr>
 <td tag="13" class="even"><img src="../images/13.png" alt="13元"></td>
 <td colspan="2" rowspan="3" class="zpBtn"><img src="../images/zpBtn.jpg" /></td>
 <td tag="4"><img src="../images/40.png" alt="40元"></td>
 </tr>
 <tr>
 <td tag="12"><img src="../images/80.png" alt="80元"></td>
 <td tag="5" class="even"><img src="../images/125.png" alt="125元"></td>
 </tr>
 <tr>
 <td tag="11" class="even"><img src="../images/250.png" alt="250元"></td>
 <td tag="6"><img src="../images/400.png" alt="400元"></td>
 </tr>
 <tr>
 <td tag="10"><img src="../images/1000.png" alt="1000元"></td>
 <td tag="9" class="even"><img src="../images/iphone6.png" alt="iphone6"></td>
 <td tag="8"><img src="../images/Thank2.png" alt="谢谢惠顾"></td>
 <td tag="7" class="even"><img src="../images/500.png" alt="500元"></td>
 </tr>
 </table>
 </div>

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

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

Javascript 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 #Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 #Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 #Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 #Javascript
js实现的动画导航菜单效果代码
Sep 10 #Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 #Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 #Javascript
You might like
PHP Curl出现403错误的解决办法
2014/05/29 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
Javascript Object.extend
2010/05/18 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
Python的print用法示例
2014/02/11 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
Python多进程fork()函数详解
2019/02/22 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
数据库连接池的工作原理
2012/09/26 面试题
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
皮肤科医师岗位职责
2013/12/04 职场文书
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript
Elasticsearch 数据类型及管理
2022/04/19 Python