一个简单的 JavaScript 抽奖应用,基于 Zepto 或 jQuery,快速便捷接入现有系统。
灵活的使用方法
可定制的自定义信息
风趣的小特效
准备一个参与抽奖者的数据
[ { "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 // 随机到下一个参与者的间隔时间,单位毫秒 });
$.lottery('start'); // 开始抽奖 $.lottery('stop'); // 停止抽奖 $.lottery('getUsers'); // 获取用户列表 $.lottery('getWinners'); // 获取中奖用户列表
Copyright © Duohui.co - Apache License 2.0
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