143

GitHub - meetmore/lottery.js: ? A simple javascript lottery app

 6 years ago
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

game_die A simple javascript lottery app.

Chinese README

Sponsor

Screenshots

lottery-demo

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK