Giter VIP home page Giter VIP logo

lottery.js's Introduction

Lottery.js

🎲 一个简单的 JavaScript 抽奖应用,基于 Zepto 或 jQuery,快速便捷接入现有系统。

English README

预览

lottery-demo

特性

  • 灵活的使用方法
  • 可定制的自定义信息
  • 风趣的小特效

使用

准备一个参与抽奖者的数据

   [
       {
           "avatar": "//example.com/avatar_1.jpg",    // 头像图片地址
           "name": "MeetMore",                        // 名字
           "data": {                                  // 该用户额外数据
               "company": "MeetMore Inc.",
               "title": "CEO",
               ...
           }
       },
       ……
   ]

在页面中引入 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>

Ready to go

    $.lottery({ 
        api:"./api.json" 
    });

参数

    $.lottery({ 
        el: ".lottery",                           // 在哪里输出抽奖的dom,使用jquery选择器
        timeout: 10,                              // 抽奖自动停止时间(秒)
        once: true,                               // 每人只能中奖一次(防止重复中奖)
        title: "company",                         // 中奖界面显示的标题 data[key]
        subtitle: "title",                        // 中奖界面显示的副标题 data[key]
        api: "http://example.com/lottery.json",   // 抽奖者数据 API 地址(非必填,若填写则 data 参数将被忽略)
        data: [],                                 // 直接传入抽奖者数据
        confetti: true,                           // 中奖时候显示小彩带动画
        showbtn: true,                            // 显示抽奖控制按钮
        fitsize: true,                            // 根据屏幕大小自动调整头像大小
        speed: 400                                // 随机到下一个参与者的间隔时间,单位毫秒
    });
参数 说明 默认值 可选值
el 在哪里输出抽奖的dom body 使用jquery选择器,例如”.lottery“
timeout 抽奖自动停止时间(秒) null 10(整数,秒)
once 每个人只能抽取一次(不可重复中奖) false true - 启用
title 中奖界面显示的标题 用户name属性 user['data'][key](附加数据属性中key内容)
subtitle 中奖界面显示的副标题 用户company属性 user['data'][key](附加数据属性中key内容)
api 传入一个抽奖用户地址,json格式 null URL
data 直接传入用户对象(直接传入时请不要使用api参数) null Object
confetti 中奖时候显示小彩带动画(如果这里不启用,可以不引入confetti.js) true false
showbtn 是否显示抽奖控制按钮 true false
fitsize 尽可能在一屏中显示所有抽奖者 true false
speed 随机到下一个参与者的间隔时间,单位毫秒 350 false

API

    $.lottery('start');      // 开始抽奖
    $.lottery('stop');       // 停止抽奖
    $.lottery('getUsers');   // 获取用户列表
    $.lottery('getWinners'); // 获取中奖用户列表
参数 说明 返回
start 开始抽奖 true
stop 停止抽奖 Object,中奖用户信息
getUsers 获取用户列表 Object,用户列表
getWinners 获取中奖用户列表 Object,中奖用户列表

浏览器支持

  • 现代浏览器

许可证

Copyright © Duohui.co - Apache License 2.0

Credits

Sponsor

lottery.js's People

Contributors

untsop avatar nekotora avatar

Watchers

 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.