手机端转盘抽奖代码分享


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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
js实现开关灯效果
Mar 30 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制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
python 瀑布线指标编写实例
2020/06/03 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
文案策划求职信
2014/03/18 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
装修安全责任协议书
2016/03/22 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书