Lottery.jsJavaScript 抽獎(jiǎng)小應(yīng)用
Lottery.js
一個(gè)簡(jiǎn)單的 JavaScript 抽獎(jiǎng)應(yīng)用，基于 Zepto 或 jQuery，快速便捷接入現(xiàn)有系統(tǒng)。
預(yù)覽
LiveDemo ->
特性
靈活的使用方法
可定制的自定義信息
風(fēng)趣的小特效
使用
準(zhǔn)備一個(gè)參與抽獎(jiǎng)?wù)叩臄?shù)據(jù)
[
{
"avatar": "http://example.com/avatar_1.jpg", // 頭像圖片地址
"name": "MeetMore", // 名字
"data": { // 該用戶額外數(shù)據(jù)
"company": "MeetMore Inc.",
"title": "CEO",
...
}
},
……
]
在頁(yè)面中引入 CSS 和 JS
Ready to go
$.lottery({
api:"./api.json"
});
參數(shù)
$.lottery({
el: ".lottery", // 在哪里輸出抽獎(jiǎng)的dom，使用jquery選擇器
timeout: 10, // 抽獎(jiǎng)自動(dòng)停止時(shí)間（秒）
once: true, // 每人只能中獎(jiǎng)一次（防止重復(fù)中獎(jiǎng)）
title: "company", // 中獎(jiǎng)界面顯示的標(biāo)題 data[key]
subtitle: "title", // 中獎(jiǎng)界面顯示的副標(biāo)題 data[key]
api: "http://example.com/lottery.json", // 抽獎(jiǎng)?wù)邤?shù)據(jù) API 地址（非必填，若填寫則 data 參數(shù)將被忽略）
data: [], // 直接傳入抽獎(jiǎng)?wù)邤?shù)據(jù)
confetti: true, // 中獎(jiǎng)時(shí)候顯示小彩帶動(dòng)畫
showbtn: true, // 顯示抽獎(jiǎng)控制按鈕
fitsize: true, // 根據(jù)屏幕大小自動(dòng)調(diào)整頭像大小
speed: 400 // 隨機(jī)到下一個(gè)參與者的間隔時(shí)間，單位毫秒
});
| 參數(shù) | 說(shuō)明 | 默認(rèn)值 | 可選值 |
|---|---|---|---|
| el | 在哪里輸出抽獎(jiǎng)的dom | body | 使用jquery選擇器，例如”.lottery“ |
| timeout | 抽獎(jiǎng)自動(dòng)停止時(shí)間（秒） | null | 10（整數(shù)，秒） |
| once | 每個(gè)人只能抽取一次（不可重復(fù)中獎(jiǎng)） | false | true - 啟用 |
| title | 中獎(jiǎng)界面顯示的標(biāo)題 | 用戶name屬性 | user['data'][key]（附加數(shù)據(jù)屬性中key內(nèi)容） |
| subtitle | 中獎(jiǎng)界面顯示的副標(biāo)題 | 用戶company屬性 | user['data'][key]（附加數(shù)據(jù)屬性中key內(nèi)容） |
| api | 傳入一個(gè)抽獎(jiǎng)用戶地址，json格式 | null | URL |
| data | 直接傳入用戶對(duì)象（直接傳入時(shí)請(qǐng)不要使用api參數(shù)） | null | Object |
| confetti | 中獎(jiǎng)時(shí)候顯示小彩帶動(dòng)畫（如果這里不啟用，可以不引入confetti.js） | true | false |
| showbtn | 是否顯示抽獎(jiǎng)控制按鈕 | true | false |
| fitsize | 盡可能在一屏中顯示所有抽獎(jiǎng)?wù)?/td> | true | false |
| speed | 隨機(jī)到下一個(gè)參與者的間隔時(shí)間，單位毫秒 | 350 | false |
API
$.lottery('start'); // 開始抽獎(jiǎng)
$.lottery('stop'); // 停止抽獎(jiǎng)
$.lottery('getUsers'); // 獲取用戶列表
$.lottery('getWinners'); // 獲取中獎(jiǎng)用戶列表
| 參數(shù) | 說(shuō)明 | 返回 |
|---|---|---|
| start | 開始抽獎(jiǎng) | true |
| stop | 停止抽獎(jiǎng) | Object，中獎(jiǎng)用戶信息 |
| getUsers | 獲取用戶列表 | Object，用戶列表 |
| getWinners | 獲取中獎(jiǎng)用戶列表 | Object，中獎(jiǎng)用戶列表 |
瀏覽器支持
現(xiàn)代瀏覽器
許可證
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
評(píng)論
圖片
表情