<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>抽奖</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
* {
padding: ;
margin: ;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
font-size: %;
} .content {
width: %;
height: auto;
background: url('./images/bg.png') no-repeat;
background-size: % auto;
position: relative;
} .content .rotateBox {
width: %;
height: auto;
margin-top: 25px;
position: relative;
} .content .rotateBox .bg {
display: block;
width: %;
height: auto;
} .content .rotateBox .star {
display: inline-block;
position: absolute;
top: %;
left: %;
-webkit-transform: translate(-%, -%);
-moz-transform: translate(-%, -%);
-ms-transform: translate(-%, -%);
transform: translate(-%, -%);
width: %;
height: %;
background: url('./images/btn.png') center center no-repeat;
background-size: %;
}
.content .rotateBox .show {
position: absolute;
top: %;
left: %;
width: %;
height: %;
background: url('./images/car.png') top center no-repeat;
background-size: 40px auto;
} .content .infor {
width: %;
margin-top: 25px;
padding: 25px 30px 35px 40px;
background: url('./images/bg2.png') no-repeat;
background-size: % auto;
}</style>
</head> <body>
<div class="content">
<div class="rotateBox">
<img src="./images/img.png" alt="" class="bg" />
<span class="show"></span>
<span class="star"></span>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script>
$(function() {
var $btn = $('.show'); // 旋转的div
var playnum = ; //初始次数,由后台传入
// $('.playnum').html(playnum); //显示还剩下多少次抽奖机会
var isture = ; //是否正在抽奖
var clickfunc = function() {
var data = [, , , , , ]; //抽奖
//data为随机出来的结果,根据概率后的结果
data = data[Math.floor(Math.random() * data.length)]; //1~6的随机数
switch(data) {
case :
rotateFunc(, , '恭喜您获得2000元理财金');
break;
case :
rotateFunc(, , '恭喜您获得2000元理财金2');
break;
case :
rotateFunc(, , '恭喜您获得2000元理财金3');
break;
case :
rotateFunc(, -, '谢谢参与4');
break;
case :
rotateFunc(, , '谢谢参与5');
break;
case :
rotateFunc(, , '谢谢参与6');
break;
}
}
$(".star").click(function() {
if(isture) return; // 如果在执行就退出
isture = true; // 标志为 在执行
if(playnum <= ) { //当抽奖次数为0的时候执行
alert("没有次数了");
// $('.playnum').html(0); //次数显示为0
isture = false;
} else { //还有次数就执行
playnum = playnum - ; //执行转盘了则次数减1
if(playnum <= ) {
playnum = ;
}
// $('.playnum').html(playnum);
clickfunc();
}
});
var rotateFunc = function(awards, angle, text) {
isture = true;
$btn.stopRotate();
$btn.rotate({
angle: , //旋转的角度数
duration: , //旋转时间
animateTo: angle + , //给定的角度,让它根据得出来的结果加上1440度旋转
callback: function() {
isture = false; // 标志为 执行完毕
alert(text);
}
});
};
});
</script>
</html>

jq 抽奖转盘的更多相关文章

  1. Android实现抽奖转盘

    一.SurfaceView认识及的应用的思路 SurfaceView继承自(extends)View,View是在UI线程中进行绘制: 而SurfaceView是在一个子线程中对自己进行绘制,优势:避 ...

  2. jquery实现抽奖转盘

    用jquery通过配置参数实现抽奖转盘 1.html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  3. JS:九宫格抽奖转盘实例

    工作需要,所以做了个抽奖转盘的插件,当然这里只做最简单的演示.可以用于取代一些flash抽奖程序. 机制说明: 1.通过定义lottery-unit来控制节点的个数及索引: 2.通过设置lottery ...

  4. Html5-Canvas实现简易的抽奖转盘

    ###Html5实现抽奖转盘效果 1.实现的基本效果 2.主要的内容 html5中canvas标签的使用 jQueryRotate.js旋转插件 3.主要html代码 <body> < ...

  5. 使用CSS3+jquery.js 实现微信抽奖转盘效果

    上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖 ...

  6. 抽奖转盘(jqueryrotate.js)

    jqueryrotate.js抽奖转盘,使用方便,兼容各浏览器,效果如下图 <!DOCTYPE> <head> <meta http-equiv="Conten ...

  7. 利用java实现抽奖转盘(着重安全控制)

    本文是针对jquery 实现抽奖转盘作者的一个补充(主要用java去实现转盘结果生成及存储,解决jquery 做法 非法用户采用模拟器实现改变转盘值的风险性),针对jQuery的具体实现,请看案例:h ...

  8. android仿漫画源码、抽奖转盘、Google相册、动画源码等

    Android精选源码 android实现仿今日头条的开源项目 波浪效果,实现流量的动态显示 美妆领域的app, 集成了摄像头取色, 朋友圈, 滤镜等 android仿漫画源码 android一个视差 ...

  9. 用CSS实现一个抽奖转盘

    效果 基本是用CSS实现的,没有用图片,加一丢丢JS.完全没有考虑兼容性. 首先画一个转盘, <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. php的内置函数debug_backtrace()与get_included_files()跟踪代码调用(Thinkphp框架举例)

    debug_backtrace() 在我们开发一个项目中,或者二开研究某个开源程序,需要对代码流程一步步去跟踪,来研究它的逻辑,才可以进行修改,达到我们的开发目的.php的内置函数debug_back ...

  2. Angular @HostBinding()和@HostListener()用法

    @HostBinding()和@HostListener()在自定义指令时非常有用.@HostBinding()可以为指令的宿主元素添加类.样式.属性等,而@HostListener()可以监听宿主元 ...

  3. Jenkins系列——使用checkstyle进行代码规范检查【升级版】

    1.背景 在<Jenkins系列——使用checkstyle进行代码规范检查>一文中完成了ant实现代码规范检查的例子.但存在以下缺陷: 每个作业都需要配置一个不同的checkstyle ...

  4. UVa230 Borrowers

    原题链接 UVa230 思路 这题输入时有一些字符串处理操作,可以利用string的substr()函数和find_last_of()函数更加方便,处理时不必更要把书名和作者对应下来,注意到原题书名的 ...

  5. 聊聊JavaScript-闭包

    今天聊聊闭包,网上五花八门的定义和解释很多很多,是不是搞得你很懵逼:每次看闭包,都不同,本来自己懂,看完别人的之后就开始怀疑自己了.在我看来,闭包简单的说就是函数里面套函数,再往大了说就是我函数外面想 ...

  6. 【天坑】ASP.net WebAPI跨域调用问题

    最近在做一个项目,前端是VUE,后端是WebAPI,业务也就是一些实体的增删改查.在项目开始的时候我就预计到有跨域的问题,所以也找了一下资料,在Web.Config里面加上了配置信息: <htt ...

  7. 转: JavaScript 获取对象属性和方法

    一.获取对象属性和方法 Object.keys()for in 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返回的数组的所有属性(可枚举或不可枚举 ...

  8. react-dom.js 源码

    /** *以下这是 react-dom.js 的源代码 * ReactDOM v15.3.1 * * Copyright 2013-present, Facebook, Inc. * All righ ...

  9. Linux基础六

    用户账号管理 基于账号身份对资源访问进行控制 账户类别:用户账号,组账号 识别方式:UID,GID 用户账号:超级用户root,系统用户,普通用户 组账号:用来区分权限,不用于登陆 基本组(私有组) ...

  10. SQL Server使用侦听器IP访问时遇到"The target principal name is incorrect. Cannot generate SSPI context"

    在测试SQL Server 2016 Always On时,在创建侦听器后,在客户端使用SSMS, 可以用侦听器名称访问Always On集群,但是使用侦听器IP访问时遇到"The targ ...