写了一个抽奖的jquery插件和计算概率的方法, 结合起来就是一个简单的概率抽奖, 不过实际项目中基本不会把抽奖概率的计算放在前端处理~。



demo

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抽奖插件+概率计算的更多相关文章

  1. jQuery抽奖插件 jQueryRotate

    实现代码 网页中引用 <script type="text/javascript" src="js/jquery.min.js"></scri ...

  2. 25款顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  3. asp.net 实现在线打印功能,jQuery打印插件PrintArea实现自动分页

    使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下. 使用方法略过,这里将介绍如何实现打印多页是可以分页. 现在提供两种方法思路: 1.根据特定的打印机型号和使用的纸张类型,然后 ...

  4. 15 个最佳的 jQuery 表格插件

    现如今,网站开发设计的需求会要求自动适应所有移动设备,即响应式网站: 在开发网站时必须考虑对平板设备融合 fluid(流)和自适应性特点. 大多数网站设计要靠margins, guides, rows ...

  5. jQuery 表格插件25

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  6. Datatables快速入门开发--一款好用的JQuery表格插件

    博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...

  7. JQuery表格插件

    http://www.datatables.club/example/#styling Datatables快速入门开发--一款好用的JQuery表格插件   博主是一个java后端程序员,前端技术会 ...

  8. 25个顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  9. jQuery旋转插件—rotate-摘自网友

    jQuery旋转插件—rotate 时间:2013年01月03日作者:愚人码头查看次数:5,660 views评论次数:6条评论 网上发现一个很有意思的jQuery旋转插件,支持Internet Ex ...

随机推荐

  1. The Great Pan

                                             The Great Pan Time Limit:1000MS     Memory Limit:65536KB    ...

  2. mac iterm2 安装 lrzsz rz sz命令

    原文:https://blog.csdn.net/jack85986370/article/details/51382077 首先mac自带的终端是不支持lrzsz的,需要下载安装iterm2,下载地 ...

  3. bash rz 上传文件失败问题

    原文链接: https://blog.csdn.net/heavendai/article/details/7549065 单独用rz会有两个问题:上传中断.上传文件变化(md5不同), 解决办法是上 ...

  4. 大话设计模式--解释器模式 interpreter -- C++实现实例

    1. 解释器模式: 给定一个语言,定义它的文法的一种表示 并 定义一个解释器,这个解释器使用该表示文法 来解释语言中的句子. 如果一种特定类型的问题发生的频率很高,那么可能就值得将该问题的各个实例表述 ...

  5. Xcode 中代码提示不显示

    解决办法: Xcode->Window->Organizer->Projects选中你的项目,点击如下图Derived Data右侧的Delete按钮 DerivedData从字面上 ...

  6. JavaScript基础挖掘目录

    前端基础进阶(一):内存空间详细图解 前端基础进阶(二):执行上下文详细图解 前端基础进阶(三):变量对象详解 前端基础进阶(四):详细图解作用域链与闭包 前端基础进阶(五):全方位解读this 前端 ...

  7. PL/SQL Developer 的 SQL 编辑窗口显示行号

    版权声明:本文为博主原创文章,未经博主允许不得转载. 一直奇怪为什么 PL/SQL 6 系列的版本可以显示行号,为什么到了 7 .8 版本之后反而还不行了?而且我都已经设置了“显示行号”的呀. 如图: ...

  8. Oracle 11g的7个服务详解

    成功安装Oracle 11g后,共有7个服务,这七个服务的含义分别为:1. Oracle ORCL VSS Writer Service:Oracle卷映射拷贝写入服务,VSS(Volume Shad ...

  9. 问题杂烩(scrollTop/背景透明度动画)

    今天给同学找我帮忙写js,是公司里的活..我是不是应该跟他要钱哈哈,不过一顿饭肯定是免不了的了. 言归正传,今天写了三个小东西,因为兼容性的问题,用jq写的(很是别扭的说,但是没办法啊,一边看api一 ...

  10. POJ-1741(树分治)

    树的点分治 给出详细的讲解!!点这里打开论文-分治算法在树的路径问题中的应用 本题目是他讲的第一个例题: 我的理解:每次都找树的重心,计算以重心为根的子树之间所贡献的答案.不断这样下去:如果这棵树是一 ...