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数组实现的抽奖教学实例.代码如下:
随机推荐
- Kqueue与epoll机制
首先介绍阻塞与非阻塞:阻塞是个什么概念呢?比如某个时候你在等快递,但是你不知道快递什么时候过来,而且你没有别的事可以干(或者说接下来的事要等快递来了才能做):那么你可以去睡觉了,因为你知道快递把货送来 ...
- 快捷查看dll的PublicKeyToken
@echo off d: cd D:\Win2003\Microsoft Visual Studio 10.0\VC\ call vcvarsall.bat x86 echo. if not '%1' ...
- 部署一个class文件
只发布一个class文件找到项目工作空间/target/class..根据项目结构找到修改的java文件编译的class文件比如RegexUtils.class使用SecureFXPortable将文 ...
- Nginx Rewrite规则初探(转)
Nginx rewrite(nginx url地址重写)Rewrite 主要的功能就是实现URL的重写,Nginx的Rewrite规则采用Pcre,perl兼容正则表达式的语法规则匹配,如果需要Ng ...
- JavaEE Tutorials (5) - 运行企业bean示例
5.1cart示例56 5.1.1业务接口57 5.1.2会话bean类57 5.1.3@Remove方法61 5.1.4辅助类61 5.1.5运行cart示例615.2一个单例会话bean示例:co ...
- cocos2dx进阶学习之场景切换
背景 在学习马里奥时,我们学习到从菜单场景到游戏场景的切换,代码如下 void CMMenuScene::OnStartCallBack( CCObject *pSender ) { CCDirect ...
- DescribingDesign Patterns 描述设计模式
DescribingDesign Patterns 描述设计模式 How do we describe design patterns?Graphical notations, while impor ...
- UISearchBar去除底部黑线问题
有时我们在设置搜索框的时候底部会出现一条黑线,要 去除这黑线只需设置. [self.searchBar setBackgroundImage:[UIImage new]];
- iOS 判断有无网络连接
众所周知,我们在开发APP时,涉及网络连接的时候,都会想着提前判断一下当前的网络连接状态,如果没有网络,就不再请求url,省去不必要的步骤,所以,这个如何判断?其实很简单. 前提:工程添加:Syste ...
- <%@ include file=” ”%> ——最简洁易懂的解释
<%@ include file=” ”%> 假如 在B.jsp 中,使用 <%@ include file=”A.jsp”%> ,那么就是把 A.jsp 的内容 原封不动 ...