0xd61/lottery.js

🎲 A simple javascript lottery app

Lottery.js

🎲 A simple javascript lottery app.

Chinese README

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

API

    $.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