143
GitHub - meetmore/lottery.js: ? A simple javascript lottery app
source link: https://github.com/meetmore/lottery.js
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Lottery.js
A simple javascript lottery app.
Sponsor
Screenshots
LiveDemo ->
Features
- Flexible
- Out of the box
- Interesting Animation Effects
Usage
Prepare data like this
[
{
"avatar": "//example.com/avatar_1.jpg",
"name": "MeetMore",
"data": {
"title": "Front-End Developer",
"company": "Little Apple",
……
}
},
……
]
import CSS/JS
<!-- Zepto or jQuery -->
<script src="http://zeptojs.com/zepto.min.js"></script>
<link rel="stylesheet" href="./lottery.min.css" />
<script src="./lottery.compact.min.js"></script>
Call function and Ready to go
$.lottery({
api:"./api.json"
});
Config
$.lottery({
el: ".lottery", // where we put dom,jquery selector
timeout: 10, // time to auto stop(second)
once: true, // winner can not repeatable
title: "company", // the title will show in winner screen data[key]
subtitle: "title", // the subtitle will show in winner screen data[key]
api: 'http://example.com/lottery.json', // API URL
data: {}, // directly use userdata object (when use this, keep api empty)
confetti: true, // show confetti effects
showbtn: true, // show control button
speed: 400, // interval time to next candidate, the unit is ms
number: 3 // how many winner will be get at one time
});
Parameter | Explain | Default | Optional |
---|---|---|---|
el | where we put dom | body | jquery selector,e.g.”.lottery“ |
timeout | time to auto stop(second) | null | 10 (int,second) |
once | winner can not repeatable | false | true (enable) |
title | the title will show in winner screen | user['name'] | user['data'][key] (key content in data fields) |
subtitle | the subtitle will show in winner screen | user['company'] | user['data'][key] (key content in data fields) |
api | API JSON URL | null | URL |
data | directly use userdata object (when use this, keep api empty) | null | Object |
confetti | show confetti effects (if disable, confetti.js is not required) | true | false |
showbtn | show control button | true | false |
speed | interval time to next candidate, the unit is ms | 350 | false |
number | how many winner will be get at one time | 1 | int |
$.lottery('start');
$.lottery('stop');
$.lottery('getUsers');
$.lottery('winners', 'get');
$.lottery('winners', 'clean');
$.lottery('history', 'show');
$.lottery('history', 'get');
$.lottery('history', 'clean');
Parameter | Explain | Return |
---|---|---|
start | startLottery | true |
stop | stopLottery | Object,WinnerUser's info |
getUsers | get user list | Object,Userlist |
winners, get | get winners list | Object,Winnerslist |
winners, clean | clean ignore user who has won | true |
history, show | show the history screen | true |
history, get | get history lottery list | Object,Historylist |
history, clean | clean history lottery list | true |
Winners will be lose after refeash page, History will be save at LocalStorage.
Browser Support
- Modern Browser
License
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK