Git Product home page Git Product logo

lottery.js's Introduction

Lottery.js

🎲 A simple javascript lottery app.

Chinese README

Sponsor

Screenshots

lottery-demo

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

lottery.js's People

Contributors

untsop avatar nekotora avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.