工作需要，所以做了个抽奖转盘的插件，当然这里只做最简单的演示。可以用于取代一些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. Windows Phone 之下拉菜单ListPicker

    默认情况下,Visual Studio的ToolBox里没有任何下拉菜单的控件可供使用,虽然可以手工输入代码使用隐藏的ComboBox来实现下拉菜单,但是显示出来的菜单与Metro UI主题不匹配.S ...

  2. winform C#屏幕右下角弹出消息框并自动消失

    ①弹出信息框后慢慢下降消失 在主窗体中新增按钮重命名为btnShowAndDisappearMessages,在click事件中写如下代码: private void btnShowAndDisapp ...

  3. 如何更有效学习php开源项目的源码

    一.先把源代码安装起来,结合它的文档和手册,熟悉其功能和它的应用方式. 二.浏览源代码的目录结构,了解各个目录的功能. 三.经过以上两步后相信你对这个开源的产品有了一个初步的了解了,那现在就开始分析它 ...

  4. js更新页面，随机更新数字

    代码1: <script> function getRandom(){ var i = Math.random()*40+160; document.getElementById(&quo ...

  5. C#编写自动关机程序复习的知识

    首先一个程序第一要素是logo 在设置里面可以设置程序图标,在ICON里设置. ICON图标可以在网上下载. 这些都是表面功夫 程序中涉及到Buton.Label.Timer.Notiflcon控件 ...

  6. 金山网络2014春季Android实习生招聘-成都站-笔试第二题

    一个文件名为input.txt的文件当中,每一行都有一个单词,要求统计单词出现的频率,并且按照从小到大出现次数打印,次数相同的按照首字母顺序排序. package jinshanwangluo.exa ...

  7. initWithCoder: 与initWithFrame:

    之前一直用代码来编写画面,现在着手使用storyboard和xib来构筑画面,遇到initWithCoder方法, 故查了下,initWithCoder方法的调用,看了篇博客,链接如下: http:/ ...

  8. uva 1428 - Ping pong

    树状数组,把他们的技能值作为轴: 首先按照编号从小到大插入值,这样就可以得到,技能值比当前小的人数: 然后按照编号从大到小再插一遍: 代码: #include<cstdio> #inclu ...

  9. 删除数据表和清空数据表的内容（保存表结构）的SHELL脚本

    A,删除指定数据库的所有数据表 #!/bin/bash # 删除mysql中所有表 # 示例: # Usage: ./script user password dbnane # Usage: ./sc ...

  10. 15个网页设计必备的Google Chrome 扩展

    2011年第一篇,翻译自freelancefolder的一篇文章.以下为译文内容: 最近,我将Google Chrome作为了我的主力浏览器,同时,将其作为我设计和开发网页的工具,尽管我还时常会去Fi ...