Lottery.js
一个简单的 JavaScript 抽奖应用，基于 Zepto 或 jQuery，快速便捷接入现有系统。
预览
LiveDemo ->
特性
灵活的使用方法
可定制的自定义信息
风趣的小特效
使用
准备一个参与抽奖者的数据
[
{
"avatar": "//example.com/avatar_1.jpg", // 头像图片地址
"name": "MeetMore", // 名字
"data": { // 该用户额外数据
"company": "MeetMore Inc.",
"title": "CEO",
...
}
},
……
]
在页面中引入 CSS 和 JS
Ready to go
$.lottery({
api:"./api.json"
});
参数
$.lottery({
el: ".lottery", // 在哪里输出抽奖的dom，使用jquery选择器
timeout: 10, // 抽奖自动停止时间（秒）
once: true, // 每人只能中奖一次（防止重复中奖）
title: "company", // 中奖界面显示的标题 data[key]
subtitle: "title", // 中奖界面显示的副标题 data[key]
api: "http://example.com/lottery.json", // 抽奖者数据 API 地址（非必填，若填写则 data 参数将被忽略）
data: [], // 直接传入抽奖者数据
confetti: true, // 中奖时候显示小彩带动画
showbtn: true, // 显示抽奖控制按钮
fitsize: true, // 根据屏幕大小自动调整头像大小
speed: 400 // 随机到下一个参与者的间隔时间，单位毫秒
});
| 参数 | 说明 | 默认值 | 可选值 |
|---|---|---|---|
| el | 在哪里输出抽奖的dom | body | 使用jquery选择器，例如".lottery" |
| timeout | 抽奖自动停止时间（秒） | null | 10（整数，秒） |
| once | 每个人只能抽取一次（不可重复中奖） | false | true - 启用 |
| title | 中奖界面显示的标题 | 用户name属性 | user['data'][key]（附加数据属性中key内容） |
| subtitle | 中奖界面显示的副标题 | 用户company属性 | user['data'][key]（附加数据属性中key内容） |
| api | 传入一个抽奖用户地址，json格式 | null | URL |
| data | 直接传入用户对象（直接传入时请不要使用api参数） | null | Object |
| confetti | 中奖时候显示小彩带动画（如果这里不启用，可以不引入confetti.js） | true | false |
| showbtn | 是否显示抽奖控制按钮 | true | false |
| fitsize | 尽可能在一屏中显示所有抽奖者 | true | false |
| speed | 随机到下一个参与者的间隔时间，单位毫秒 | 350 | false |
API
$.lottery('start'); // 开始抽奖
$.lottery('stop'); // 停止抽奖
$.lottery('getUsers'); // 获取用户列表
$.lottery('getWinners'); // 获取中奖用户列表
| 参数 | 说明 | 返回 |
|---|---|---|
| start | 开始抽奖 | true |
| stop | 停止抽奖 | Object，中奖用户信息 |
| getUsers | 获取用户列表 | Object，用户列表 |
| getWinners | 获取中奖用户列表 | Object，中奖用户列表 |
浏览器支持
现代浏览器
许可证
Copyright © Duohui.co - Apache License 2.0
Credits
confetti.js is created by Javier Sosa
Icons are created by Okay: Yasir B. Eryılmaz, Crown: Pundimon, Dice: davidyu from the Noun Project
Move.js is created by TJ Holowaychuk
-
/* * Lottery.js * version 1.0 * @example Lottery(id, start, end, goods, callBack); */ var Lottery = (function() { var canvas, render2D, start, end, good
-
1 /* 2 * Lottery.js 3 * version 1.0 4 * @example Lottery(id, start, end, goods, callBack); 5 */ 6 7 var Lottery = (function() { 8 var canvas, 9 render2D, 10
-
抽奖互动能够有效活跃直播间气氛，吸引更多观众参与直播互动 讲师端 说明： 1)自定义奖品名称：发起抽奖时可自定义抽奖名称,观看端进行显示 2)参与用户：可选择全部在线用户或本次直播未中奖用户参与抽奖（一场直播中，累计中奖人数不能超过2000人，否则发起抽奖时，如参与用户设置为未中奖用户则无法发起） 3)中奖人数:支持一次性抽取1-200个中奖用户 4)预设中奖用户：可基于在线用户列表提前选择中奖用
-
获取抽奖信息 Mudu.Room.LuckyDraw.Get(function (response) { response = JSON.parse(response) if (response.status === 'y') { console.log('获取成功，数据为：', response.data) } if (response.status === 'n') {
-
本文向大家介绍大转盘抽奖小程序版 转盘抽奖网页版，包括了大转盘抽奖小程序版 转盘抽奖网页版的使用技巧和注意事项，需要的朋友参考一下 今天整理了下以前写的小demo，把大转盘抽奖的代码，整合下，列了网页版和小程序两个版本，这个转盘抽奖的核心是H5的canvas和Css3的translate属性，非常简单，写了网页版和小程序版供大家参考，主要核心代码就是利用canvas画图，完整代码见大转盘抽奖，下载
-
本文向大家介绍python实现抽奖小程序，包括了python实现抽奖小程序的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了python实现抽奖小程序的具体代码，供大家参考，具体内容如下 设计一个抽奖服务 背景：有x个奖品，要求在y天内发完；每天至少发放z个奖品；每天抽奖人数不定，事先会假设一个范围是m-n 举例：有100个奖品，要求5天内发完，每天至少发15个奖品；每天来抽奖的人估
-
抽奖 调用抽奖，异步接口。若使用TidaSDK自带UI，则不用关心结果是什么，直接将结果缓存下来。调用Tida.showDrawResult时传入回调结果即可。 若需要定制化UI，有关结果数据结构见下面注释 /** * Tida.draw 抽奖接口回调 * @callback Tida~drawCallback * @param {object} result 结果数据对象 * @para
-
包括 抽奖接口、查询保存粉丝、抽奖记录等
-
本文向大家介绍小程序实现抽奖动画，包括了小程序实现抽奖动画的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了小程序实现抽奖动画展示的具体代码，供大家参考，具体内容如下 所有的抽奖都是由后台计算后得到的，前台只做动画展示 js: css: 想要学习更多关于抽奖功能的实现，请参考此专题：抽奖功能 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
Mudu.Room.LuckyDraw 抽奖组件 获取抽奖信息 Mudu.Room.LuckyDraw.Get(function (response) { response = JSON.parse(response) if (response.status === 'y') { console.log('获取成功，数据为：', response.data) } if (r