js轮盘抽奖
js轮盘抽奖
需求:实现中奖是否可控
思路:通过旋转角度来实现轮盘转动,根据角度来确定是否中奖
window.onload = function(){ var oTurn = document.getElementById('turntable'); var oStart = document.getElementById('start'); var timer, timer2 = null; var deg = 0; //当前旋转度数 var iSpeed = 0; //加速减速变量 var iNum = 1800; //旋转角度(旋转多少圈360*i) var iZ = 45+60*1; //可中奖的值(15+60*i), 不中奖的值(45+60*i) var iTotal = iNum + iZ; //总共旋转度数 var bStop = true; //可点击开关 var iTp = 0; //保存下一次旋转需要的总度数 var bFirst = true; //是否第一次点击 oStart.onclick = function(){ start(); }; function start(){ if(bStop){ bStop = false; timer = setInterval(function(){ //第一次点击,小于总度数的一半时加速,大于一半是减速,速度小于0时,默认为0.5 if(bFirst){ if(deg<=iTotal/2){ iSpeed = iSpeed + 0.1; } if(deg>iTotal/2){ iSpeed -= 0.1; } if(iSpeed <= 0){ iSpeed = 0.5; } }else{ if(deg<=iTp/2){ iSpeed = iSpeed + 0.1; } if(deg>iTp/2){ iSpeed -= 0.1; } if(iSpeed <= 0){ iSpeed = 0.5; } } deg+=iSpeed; //每次旋转度数=当前度数+ 速度变量(速度快,旋转快,即加速运动;速度慢,减速运动) //当前度数大于等于总度数是停止 if(deg>=iTotal){ clearInterval(timer); deg%=360; //设置 iTp = iTotal + deg; //下一次旋转的总度数 iSpeed = 0; //重置 bFirst = false; bStop = true; return false; }else{ $('#turntable').css({'-webkit-transform':'rotate(' + deg + 'deg)'}); } }, 30); } } };
js轮盘抽奖的更多相关文章
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...
- 原生js轮盘抽奖实例分析(幸运大转盘抽奖)
效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...
- js转盘抽奖
这个是很简易的转盘,只用了html,css,js 通过css产生一个转盘上的指针,用js动态改变css中的transparent改变指针的角度.再添加一个背景图片类似于奖项的转盘 <!DOCTY ...
- js一个抽奖的例子
朋友公司开年会,帮忙写了个抽奖的demo,源码如下,github中有程序: html: <header> lottery demo </header> <div clas ...
- Js 转动抽奖实现
一.样本 地址:http://js.zhuamimi.cn/choujiang/index.htm 源码:https://pan.baidu.com/s/15KhesfcLf1WMOom6PhzCjA ...
- js实现抽奖
抽奖.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- js 简单抽奖实现
大家在很多活动页面上都看到绚丽多彩的抽奖运用,网上也有比较多关于这方面的js和用as.今天我在工作的时候也要做个抽奖的运用.我之前没有写过这类的js,也不会as,就得屁颠屁颠的问度娘啦,虽然找到有js ...
- jquery.rotate.js可选抽奖次数和中奖内容的转盘抽奖demo
需求: 最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-cont ...
- JS数组抽奖程序教学实例
数组Javascript中非常重要的知识点,为了在课堂上提高学生兴趣,教学举例的选择就比较重要了. 为了提高学生兴趣,特设计一个可输入,可控制结束的,利用JS数组实现的抽奖教学实例.代码如下:
随机推荐
- Nginx 之四: Nginx服务器的rewrite、全局变量、重定向和防盗链相关功能
一:Nginx 后端服务器组的配置: 1.upstream: 用于设置后端服务器组的主要指令,upstream类似于之前的server块或http块,用法如下: upstreame Myserver{ ...
- django-celery提供给顾客使用实例
导入数据库 from djcelery import models as celery_models celery_models.PeriodicTask.objects.create(...) ...
- KbmMW两种查询结果集通讯方式
KbmMW本身可以用QueryService的方式进行远程数据查询,但是SmpileService同样具有很强的扩展性可以实现数据查询,下面展示两种基于SmpileService的远程数据查询方法,其 ...
- python 安装ssh和Scrapy
在Python中没有专用的SSH模块,这需要手动的安装模块才行.Python中使用SSH需要用到OpenSSH,而OpenSSH依赖于paramiko模块,paramiko模块又依赖于pycrypto ...
- 关于FTP操作的功能类
自己在用的FTP类,实现了检查FTP链接以及返回FTP没有反应的情况. public delegate void ShowError(string content, string title); // ...
- SRBF Lighting
SRBF的全称是Spherical Radial Basis Function,笔者擅自翻译为球面放射基底函数.由于SRBF并不怎么出名,相对来说,SH(Spherical Harmonic)球 ...
- activity变成Dialog的步骤
1.在布局文件上最外层最好使用RelativeLayout来布局,如果使用LinearLayout来布局的话,显示对话框的话,感觉会有点问题: 要在预览中看到框框,并且是match_parent的,而 ...
- iOS开发中两个不错的宏定义
/** Synthsize a weak or strong reference. Example: @weakify(self) [self doSomething^{ @strongify(sel ...
- C# 7.0
C# 7.0 本文参考Roslyn项目中的Issue:#118. 1. C# 7.0 新特性1: 基于Tuple的“多”返回值方法 2. C# 7.0 新特性2: 本地方法 3. C# 7.0 新特性 ...
- Clojure学习:表达式与函数
Clojure是一门Lisp方言——确切地说,是一门JVM上的Lisp方言——也是一门非纯粹的函数式语言. Clojure理所当然地秉承了Lisp“代码即数据( code is data! )”的设计 ...