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;
}
}
})
以上就是本文给大家分享的手机端转盘抽奖代码分享,希望大家喜欢。
HTML手机签到转盘抽奖页面模板,手机端转盘抽奖代码分享相关推荐
- php 九宫格验证码,PHP+Ajax微信手机端九宫格抽奖实例
PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现.支持可以设置中奖概率等. 奖品列表 - Ajax抽奖 $.post("ajax. ...
- 苹果cms手机模板好看的简洁手机端模板免费下载
苹果cms手机模板主题介绍: 模板名称:苹果cms手机模板好看的简洁手机端模板免费下载 模板程序:苹果cmsv10 模板类型:wap手机端模板 空间支持:php5.6+mysql 模板颜色:白色 模板 ...
- 用java制作一个软件控制小车_Android手机控制智能小车的手机端程序(完整版)...
[实例简介] 本程序是我写的Android手机控制智能小车的手机端的全部的源程序,下载后直接就能用. [实例截图] [核心代码] 624ba65e-a75e-4ba0-8e72-6dbc0823fcb ...
- 5套独立的app手机端模板界面代码
MobioKit是移动手机端HTML模板,可以很容易创建手机网站布局设计,或者移动App应用.创意设计和神奇的特性将在让你完美的移动项目独一无二的.这个移动端UI工具包包含所有必要的设计,可以创建移动 ...
- php 手机端播放器,用JS代码适配电脑端和手机端播放器代码
用JS代码适配电脑端和手机端播放器代码 蓝叶 网站设计 2016-08-10 10668 9评论 随着html5的崛起,很多网站都采用html5代码来设计,让网站美观大气,但是 ...
- 仿微信手机端支付页面代码可改余额
介绍: 高仿的微信手机端支付页面代码可改余额,就自己看看装个样子,别去骗人啊,哈哈哈哈,穷人只能这样玩玩 网盘下载地址: http://kekewl.org/uGEBzURdmBF0 图片:
- 李白计算机乐谱,天谕手游李白乐谱代码是什么-天谕手游李白乐谱代码分享_快吧手游...
天谕手游李白乐谱代码是什么?天谕中我们可以使用外部代码复制到游戏中,然后制作出自己的音乐乐谱.很多小伙伴都想把这一首歌写进自己的天谕乐谱.下面就一起来看看吧! 天谕手游李白乐谱代码分享 A轨 v13a ...
- 计算机despacito乐谱,天谕手游despacito乐谱代码分享
天谕手游玩家可以作为乐师的身份演奏歌曲,despacito是又贾斯丁比伯演唱的一首西班牙歌曲,节奏感较强,让人听了就会时不时的哼唱起来.下面小编给大家带来了天谕手游despacito乐谱代码分享,大家 ...
- 用计算机最炫民族风乐谱,天谕手游最炫民族风乐谱代码分享
天谕手游最炫民族风乐谱代码是什么?<最炫民族风>是凤凰传奇演唱的一首流行歌曲,由张超作词和谱曲,发行于2009年5月27日,是其第三张专辑<最炫民族风>的主打歌.接下来小编为大 ...
最新文章
- 凭借这份Java面试题集,分布式宝典:限流+缓存+通讯
- Eclipse中web项目部署至Tomcat步骤
- MFC程序崩溃的友好处理
- matlab lpfilter.m,histroi/statmoments/lpfilter/dftuv的Matlab程序
- 使用IntelliJ书签
- 把 mysql 整个加载进内存磁盘中_MySQL 缓冲池 是什么?
- JDBC中使用RowSet包装结果集
- tkinter Canvas画图片大坑总结
- 查看驱动安装错误日志
- MySQL连接问题 --- (1251:Client does not support ...)
- 1096 大美数 – PAT乙级真题
- 你在工作中遇到过印象深刻的困难是什么,你怎么克服的?
- android apk是什么文件,apk是什么文件?apk文件肿么打开?
- 阿里云对象存储oss私有桶生成链接
- 纯CSS 实现格子背景(国际象棋棋盘)
- django前端页面下拉选择框默认值设置
- 10分钟用Python制作恋爱日志
- 《赵成的运维体系管理课》学习笔记(2)——持续交付
- VCS+Verdi脚本化仿真Vivado工程流程
- 2019_GDUT_新生专题I选集——C