V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
unstop
V2EX  ›  分享创造

🎲 Lottery.js 开源的 JavaScript 抽奖小应用

  •  3
     
  •   unstop · 2017-10-10 22:52:38 +08:00 · 8289 次点击
    这是一个创建于 2585 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Lottery.js

    📖 简介

    Lottery.js 是一个简单的抽奖小应用,主要特征有:

    • ✨ 界面好看
    • 🍀 接口简单
    • 😎 开箱即用

    👀 预览

    lottery-demo

    🔗 链接

    LiveDemo: https://meetmore.github.io/lottery.js/

    GitHub: https://github.com/meetmore/lottery.js/

    💡 缘起

    该功能源自 多会 为活动提供的现场抽奖大屏,如果你不仅需要一个抽奖页面,还需要活动报名售票现场签到等功能的话,欢迎 注册体验多会

    第 1 条附言  ·  2017-10-11 21:36:40 +08:00
    🙏感谢大家的评论和收藏。

    如果你希望 🎲 Lottery.js 得到进一步改进,欢迎在在 HN 给 🎲 Lottery.js Upvote

    https://news.ycombinator.com/item?id=15449437

    或者在 GitHub 给项目加星 🌟

    https://github.com/meetmore/lottery.js
    第 2 条附言  ·  2017-11-08 11:52:03 +08:00
    v1.1 更新:

    - 新增:👥 一次抽多个中奖者
    - 新增:📝 中奖记录
    39 条回复    2017-11-08 12:43:43 +08:00
    NekoTora
        1
    NekoTora  
       2017-10-10 23:04:24 +08:00
    😘👍
    assad
        2
    assad  
       2017-10-10 23:08:07 +08:00 via Android
    😙
    garth
        3
    garth  
       2017-10-11 08:32:37 +08:00 via iPhone
    在手机上看效果不太好
    unstop
        4
    unstop  
    OP
       2017-10-11 09:50:42 +08:00
    @garth 刚刚试了一下,确实有些问题…

    主要考虑的应用场景是在电脑上用浏览器开全屏展示,因此没有对手机做专门的兼容。

    pull requests are welcome :)
    levon
        5
    levon  
       2017-10-11 09:55:21 +08:00
    mark
    lauix
        6
    lauix  
       2017-10-11 09:59:58 +08:00
    还好吧,一般般。

    bug 挺多的。
    kurtrossel
        7
    kurtrossel  
       2017-10-11 10:00:11 +08:00
    Richard 什么背景,每次都是他中奖?
    unstop
        8
    unstop  
    OP
       2017-10-11 10:02:14 +08:00
    @lauix 具体遇到了什么 bug ?
    levon
        9
    levon  
       2017-10-11 10:04:27 +08:00
    @kurtrossel Boss,说明可以做手脚,好东西,哈哈
    unstop
        10
    unstop  
    OP
       2017-10-11 10:06:01 +08:00
    @kurtrossel 在录制 gif 的时候为了保证效果所以钦定了由 Richard 来拿这个奖。
    TangMonk
        11
    TangMonk  
       2017-10-11 10:23:33 +08:00
    美洽该升级了啊
    torbrowserbridge
        12
    torbrowserbridge  
       2017-10-11 10:41:09 +08:00
    人再多点,UI 怎么处理的?
    unstop
        13
    unstop  
    OP
       2017-10-11 10:42:57 +08:00
    @torbrowserbridge 有一个自动调整头像大小的选项( fitsize ),如果打开之后会自动缩小头像尺寸,来尽可能将所有头像展示在同一屏。
    nimingyonghu
        14
    nimingyonghu  
       2017-10-11 10:49:59 +08:00   ❤️ 1
    不错 赞一个.
    但是有一点感觉很奇怪,就是感觉移动速度有点慢了,不知道速度可以设置不啊?如果只是 demo 里的速度的话,感觉手速快的人甚至可以在白圈停在某个人头像上时秒按 STOP.

    另外,个人建议能否加个特效,比如白圈转动的时候,出现个遮罩什么的,只有白圈选中的人是高亮那种...
    unstop
        15
    unstop  
    OP
       2017-10-11 11:36:49 +08:00
    @nimingyonghu 很棒的想法。

    刚刚加上了速度配置项和高亮效果。
    extzhou
        16
    extzhou  
       2017-10-11 11:39:58 +08:00
    感觉可以借鉴过来 通过微信签到 拿到微信头像做抽奖,成功的推送模板消息到微信,另外也同样关心 @torbrowserbridge 说的头像超出一屏时候怎么处理的问题。
    unstop
        17
    unstop  
    OP
       2017-10-11 11:45:12 +08:00
    @extzhou 实际上如果是生产级别的使用可以考虑用多会的签到系统,或者用多会的微信群抽奖功能。

    上面有提到,头像会自动 resize。

    > 有一个自动调整头像大小的选项( fitsize ),如果打开之后会自动缩小头像尺寸,来尽可能将所有头像展示在同一屏。
    dyxang
        18
    dyxang  
       2017-10-11 12:53:24 +08:00 via Android
    如果没有头像只有名字怎么办?那显示的是什么?
    unstop
        19
    unstop  
    OP
       2017-10-11 12:58:25 +08:00
    @dyxang 目前来说,头像是必填的…
    kokdemo
        20
    kokdemo  
       2017-10-11 13:06:49 +08:00
    @unstop 网站的 navbar 里 点 logo 回不到主页……
    unstop
        21
    unstop  
    OP
       2017-10-11 13:09:24 +08:00
    @kokdemo 注册页面对么?这是为了提高注册转化率,故意这样设计的。
    kokdemo
        22
    kokdemo  
       2017-10-11 14:08:36 +08:00
    @unstop ……一脸懵 b 啊……想看一下介绍都看不到……
    unstop
        23
    unstop  
    OP
       2017-10-11 14:33:15 +08:00 via iPhone
    @kokdemo 因为一般用户不会直接落地在注册页面...
    torbrowserbridge
        24
    torbrowserbridge  
       2017-10-11 15:41:31 +08:00 via Android
    并不适合人数很多的场景
    unstop
        25
    unstop  
    OP
       2017-10-11 16:02:18 +08:00
    @torbrowserbridge 超过 100 人的话就不太可能将所有参与抽奖的人全展示在同一屏内。

    不过似乎也没有更好的解决方案?
    torbrowserbridge
        26
    torbrowserbridge  
       2017-10-11 16:41:45 +08:00 via Android
    @unstop 可以在光圈跳动的时候,同时切换每个随机位置的头像
    loading
        27
    loading  
       2017-10-11 16:59:24 +08:00
    不如直接开 concole,运行原生随机函数,即时出数据,大家都没意见。
    dyxang
        28
    dyxang  
       2017-10-11 20:49:43 +08:00 via Android
    @unstop 为何不弄个默认头像?
    dyxang
        29
    dyxang  
       2017-10-11 20:51:01 +08:00 via Android
    @unstop 或者像 gmail 根据用户名生成的字母头像一样弄个什么的
    dyxang
        30
    dyxang  
       2017-10-11 20:57:41 +08:00 via Android
    为何不在结果之后播放一段庆祝音频?
    unstop
        31
    unstop  
    OP
       2017-10-11 21:23:30 +08:00
    @dyxang 这些想法都很棒!欢迎给我提 pull request。
    dyxang
        32
    dyxang  
       2017-10-11 21:32:41 +08:00 via Android
    @unstop 但是
    我没有 github 帐号
    我不会 js
    sorry😂
    derpc
        33
    derpc  
       2017-10-11 22:19:46 +08:00
    直接双击就可以钦定了:doge
    sheyong
        34
    sheyong  
       2017-10-11 22:56:16 +08:00
    一次抽多个人呢 支持吗
    unstop
        35
    unstop  
    OP
       2017-10-12 03:59:43 +08:00 via iPhone
    @sheyong 目前不支持,后续可能会增加。
    unique
        36
    unique  
       2017-10-12 09:29:19 +08:00 via iPhone
    这个不错,star 了
    inmyfree
        37
    inmyfree  
       2017-10-12 17:20:29 +08:00
    楼主,我很给力的,每个项目都点了两下 star。。。。
    only0jac
        38
    only0jac  
       2017-10-12 23:42:49 +08:00 via Android
    图怎么截的?
    mfhh
        39
    mfhh  
       2017-11-08 12:43:43 +08:00
    👍
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3761 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 04:14 · PVG 12:14 · LAX 20:14 · JFK 23:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.