工作需要，所以做了个抽奖转盘的插件，当然这里只做最简单的演示。可以用于取代一些flash抽奖程序。

机制说明：

1、通过定义lottery-unit来控制节点的个数及索引；

2、通过设置lottery.crcle来定义需要转动的基本次数，在这个次数内，定时器的时间间隔不断递减，知道某个具体的数值；

3、当外界设置了lottery.prize即中奖目标的索引后，检查当当前转动次数已经大于lottery.crcle，这个过程开始递减定时器的时间间隔，直到lottery.prize等于lottery.prize，这时候初始化所有参数。

原文：http://blog.cxycs.com/article/56

在线演示：http://blog.cxycs.com/demos/lottery/

源码下载：http://blog.cxycs.com/demos/lottery.rar

JS：九宫格抽奖转盘实例的更多相关文章

  1. JS数组抽奖程序教学实例

    数组Javascript中非常重要的知识点,为了在课堂上提高学生兴趣,教学举例的选择就比较重要了. 为了提高学生兴趣,特设计一个可输入,可控制结束的,利用JS数组实现的抽奖教学实例.代码如下:

  2. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  3. php+lottery.js制作九宫格抽奖实例

    php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...

  4. jquery——九宫格大转盘抽奖

    一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...

  5. PHP+Ajax微信手机端九宫格抽奖实例

    PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现.支持可以设置中奖概率等. 奖品列表 <div class="lottery ...

  6. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

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

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

  8. 抽奖转盘（jqueryrotate.js）

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

  9. Js写九宫格抽奖

    国庆出去转了一圈,回来及时把以前写的一些有用的在这儿记录一下 --------------------------------------------我是分割线-------------------- ...

随机推荐

  1. js 判断一个点是否在一个多边形之内

    出处: https://github.com/substack/point-in-polygon/blob/master/index.js github: https://github.com/sub ...

  2. 深入理解QStateMachine与QEventLoop事件循环的联系与区别

    最近一直在倒腾事件循环的东西,通过查看Qt源码多少还是有点心得体会,在这里记录下和大家分享.总之,对于QStateMachine状态机本身来说,需要有QEventLoop::exec()的驱动才能支持 ...

  3. Linux 共享内存编程

    共享内存允许系统内两个或多个进程共享同一块内存空间,并且数据不用在客户进程和服务器进程间复制,因此共享内存是通信速度最快的一种IPC. 实现的机制简单描述如下:一个进程在系统中申请开辟了一块共享内存空 ...

  4. 【python之旅】python的面向对象

    一.面向过程 VS 面向对象 1.编程范式 编程是程序员用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程,一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,实现一个任务的 ...

  5. 【python】python支持中文变量，醉了

    哈哈 = 1 呜呜 = -1 哈哈 + 呜呜 = 0

  6. SpringMVC源码阅读（一）

    DispatcherServlet是整个SpringMVC初始化和处理请求的重要类,作为一个servlet,拥有 public void init(ServletConfig config) thro ...

  7. Hive的MoveTask错误

    最近在部署Hive上线,结果在线上线下同时出现了MoveTask报错的现象,虽然两者错误的日志以及错误信息一样,但是经过分析解决又发现两者的原因是不一样的. 首先线下的错误日志: 2015-05-18 ...

  8. bzoj 2209: [Jsoi2011]括号序列 splay

    2209: [Jsoi2011]括号序列 Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 833  Solved: 392[Submit][Status ...

  9. TCP三次握手和http过程

    pc浏览服务器网页此过程不包括域名查询,只描述TCP与http数据流的变化.一.pc与http服务器进行三次握手来建立连接.1.pc:seq=0 ack=0 syn=1 ack=0 发送给服务器建立同 ...

  10. 【andorid】Attribute is missing the Android namespac

    初学安卓,错误颇多 出现这个问题,是因为xml节点属性单词拼写错了,比如android我写成了adnorid,当然就错误了.