jquery抽奖插件+概率计算
写了一个抽奖的jquery插件和计算概率的方法, 结合起来就是一个简单的概率抽奖, 不过实际项目中基本不会把抽奖概率的计算放在前端处理~。
lottery.jquery.js
$.fn.extend({
lottery: function(conf) {
var def = {
lotIndex: 0, // 抽中的索引
item: "li",
onClass: "on",
speedStart: 50, // 初始速度
speedEnd: 400, // 结束速度
speedType: "", // 默认匀速 可选 change: 减速
overTime: 5000, // 抽奖时长(最短)
overCallback: function() {} // 抽奖结束后的回调函数
};
if (typeof conf.lotIndex === "undefined") {
return
}
def = $.extend({}, def, conf);
var $lotteryList = $(this),
lotteryControl = {};
lotteryControl = {
$el: $lotteryList,
item: def.item,
itemLen: 0,
index: 0,
speedType: def.speedType,
speedStart: def.speedStart,
speed: def.speedStart,
speedEnd: def.speedEnd,
a: 0, // 加速度
nowTime: 0, // 抽奖已进行时间
overFlag: false, // 抽奖是否结束
onClass: def.onClass,
lotIndex: def.lotIndex,
overTime: def.overTime,
overCallback: def.overCallback,
init: function() {
this.$items = this.$el.find(this.item);
this.itemLen = this.$items.length;
this.a = (this.speedEnd - this.speed) / this.overTime;
if (this.lotIndex >= this.itemLen) {
this.error();
} else {
this.start();
}
},
start: function() {
var self = this;
this.play();
this.setStop();
switch (this.speedType) {
case "change":
this.changeSpeed();
break;
}
},
play: function() {
var $items = this.$items;
$items.eq(this.index - 1).removeClass(this.onClass);
$items.eq(this.index).addClass(this.onClass);
if (this.overFlag && this.index === this.lotIndex) {
this.stop();
} else {
this.next();
}
},
next: function() {
var self = this;
this.index++;
this.index = this.index === this.itemLen ? 0 : this.index;
setTimeout(function() {
self.play();
}, this.speed);
},
changeSpeed: function() {
var self = this;
setTimeout(function() {
self.nowTime += self.speed;
if (!self.overFlag) {
self.speed = self.speedStart + self.a * self.nowTime;
self.changeSpeed();
}
}, this.speed);
},
setStop: function() {
var self = this;
setTimeout(function() {
self.overFlag = true;
}, this.overTime);
},
stop: function() {
this.overCallback();
},
error: function() {
console.log("error.......");
}
};
lotteryControl.init( );
return this;
}
});
概率计算
function Probability(conf) {
this.probArr = conf || [];
this.range = [],
this.len = this.probArr.length;
if (this.len > 0) {
this.init();
}
}
Probability.prototype = {
init: function() {
this.setRange();
},
get: function() {
var len = this.len,
range = this.range,
last,
randNum,
i = 0;
if (len === 0) {
return;
} else if(len === 1) {
return 0;
}
last = range[len -1];
randNum = Math.floor(last* Math.random());
for (; i < len; i++) {
if (randNum < range[i]) {
break;
}
}
return i;
},
setRange: function() {
var range = [],
probArr = this.probArr,
i = 0,
len = probArr.length;
for(; i<len; i++) {
var now = probArr[i],
last = range[i-1] || 0;
range.push(now+last);
}
this.range = range;
}
};
jquery抽奖插件+概率计算的更多相关文章
- jQuery抽奖插件 jQueryRotate
实现代码 网页中引用 <script type="text/javascript" src="js/jquery.min.js"></scri ...
- 25款顶级的jQuery表格插件
jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...
- asp.net 实现在线打印功能,jQuery打印插件PrintArea实现自动分页
使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下. 使用方法略过,这里将介绍如何实现打印多页是可以分页. 现在提供两种方法思路: 1.根据特定的打印机型号和使用的纸张类型,然后 ...
- 15 个最佳的 jQuery 表格插件
现如今,网站开发设计的需求会要求自动适应所有移动设备,即响应式网站: 在开发网站时必须考虑对平板设备融合 fluid(流)和自适应性特点. 大多数网站设计要靠margins, guides, rows ...
- jQuery 表格插件25
jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...
- Datatables快速入门开发--一款好用的JQuery表格插件
博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...
- JQuery表格插件
http://www.datatables.club/example/#styling Datatables快速入门开发--一款好用的JQuery表格插件 博主是一个java后端程序员,前端技术会 ...
- 25个顶级的jQuery表格插件
jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...
- jQuery旋转插件—rotate-摘自网友
jQuery旋转插件—rotate 时间:2013年01月03日作者:愚人码头查看次数:5,660 views评论次数:6条评论 网上发现一个很有意思的jQuery旋转插件,支持Internet Ex ...
随机推荐
- Spark- 求最受欢迎的TopN课程
数据库操作工具类 package com.rz.mobile_tag.utils import java.sql.{Connection, DriverManager, PreparedStateme ...
- CDH- 集群时间同步ntp问题解决
在CDH集群中发现有两台机器获取不到心跳(),导致监控不了机器状态,出现告警 可以使用ntpstat检查与ntp 服务器的时间偏差状态 使用 ntpstat 发现没有同步到ntp时间服务器,运行 nt ...
- PHP面试题,自己几斤几两,看看就知道了
0.简单做一下自我介绍,? 然后谈一下近三年来你的得意之作? 1.面试官看过你的简历,会问一些你做的项目的用户量.pv.吞吐量.相关难点和解决方法等 2.数据库设计经验,为什么进行分表? 分库? 一般 ...
- PHP消息队列用法实例分析
这篇文章主要介绍了PHP消息队列用法,结合实例形式分析了PHP消息队列用于Linux下进程间通信的相关技巧,需要的朋友可以参考下 该消息队列用于linux下,进程通信 队列状态信息:具体参考手册
- Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术——不就是chrome OS吗?
什么是Progressive Web App? Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术,由Google实现,让浏览器打开的网址像APP一样运行 ...
- Selenium-几种元素定位方式
#识别元素并操作#一般有如下几种方法,其中id最为常用.这里需要注意识别元素一定要用唯一id 1.find_element_by_id("value") #! /usr/bin/e ...
- Bootstrap-other内置组件
1.缩略图 缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息.Bootstrap框架将这一部独立成一个模块组件.并通过“thumbnail ...
- (转)gcov、lcov与genhtml 使用心得
gcc是linux平台下的C.C++ 编译器 gcov是配合gcc产生覆盖信息报告的工具: lcov是将gcov产生的报告信息,以更直观的方式显示出来工具 基本的使用方法分为4个阶段: (一).gcc ...
- mysql调优参考笔记
之前一位童鞋发的: 5版邮件,在用户量很大的情况下,如果做了分布式,如果在后端mysql上执行: mysql> show global status like 'Thread%'; Th ...
- 恢复到特定点(时间点、scn、日志序列号),rman不完全恢复
将数据库.表空间.数据文件等恢复至恢复备份集保存时间中的任何一个时间点/SCN/日志序列(一般是日志挖掘找到误操作点),但须谨慎,操作前一定需要做好备份,具备条件的情况下最好先恢复到异机,避免业务停机 ...
