V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2990 天前的主题，其中的信息可能已经有所发展或是发生改变。

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 更新：

- 新增：一次抽多个中奖者
- 新增：中奖记录

lottery

抽奖

GitHub

livedemo

39 条回复 2017-11-08 12:43:43 +08:00

NekoTora

2017-10-10 23:04:24 +08:00

assad

2017-10-10 23:08:07 +08:00 via Android

garth

2017-10-11 08:32:37 +08:00 via iPhone

在手机上看效果不太好

unstop

2017-10-11 09:50:42 +08:00

@garth 刚刚试了一下，确实有些问题…

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

pull requests are welcome :)

levon

2017-10-11 09:55:21 +08:00

mark

lauix

2017-10-11 09:59:58 +08:00

还好吧，一般般。

bug 挺多的。

kurtrossel

2017-10-11 10:00:11 +08:00

Richard 什么背景，每次都是他中奖？

unstop

2017-10-11 10:02:14 +08:00

@lauix 具体遇到了什么 bug ？

levon

2017-10-11 10:04:27 +08:00

@kurtrossel Boss，说明可以做手脚，好东西，哈哈

unstop

2017-10-11 10:06:01 +08:00

@kurtrossel 在录制 gif 的时候为了保证效果所以钦定了由 Richard 来拿这个奖。

TangMonk

2017-10-11 10:23:33 +08:00

美洽该升级了啊

torbrowserbridge

2017-10-11 10:41:09 +08:00

人再多点，UI 怎么处理的？

unstop

2017-10-11 10:42:57 +08:00

@torbrowserbridge 有一个自动调整头像大小的选项（ fitsize ），如果打开之后会自动缩小头像尺寸，来尽可能将所有头像展示在同一屏。

nimingyonghu

2017-10-11 10:49:59 +08:00

不错赞一个.
但是有一点感觉很奇怪,就是感觉移动速度有点慢了,不知道速度可以设置不啊?如果只是 demo 里的速度的话,感觉手速快的人甚至可以在白圈停在某个人头像上时秒按 STOP.

另外,个人建议能否加个特效,比如白圈转动的时候,出现个遮罩什么的,只有白圈选中的人是高亮那种...

unstop

2017-10-11 11:36:49 +08:00

@nimingyonghu 很棒的想法。

刚刚加上了速度配置项和高亮效果。

extzhou

2017-10-11 11:39:58 +08:00

感觉可以借鉴过来通过微信签到拿到微信头像做抽奖，成功的推送模板消息到微信，另外也同样关心 @torbrowserbridge 说的头像超出一屏时候怎么处理的问题。

unstop

2017-10-11 11:45:12 +08:00

@extzhou 实际上如果是生产级别的使用可以考虑用多会的签到系统，或者用多会的微信群抽奖功能。

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

> 有一个自动调整头像大小的选项（ fitsize ），如果打开之后会自动缩小头像尺寸，来尽可能将所有头像展示在同一屏。

dyxang

2017-10-11 12:53:24 +08:00 via Android

如果没有头像只有名字怎么办？那显示的是什么？

unstop

2017-10-11 12:58:25 +08:00

@dyxang 目前来说，头像是必填的…

kokdemo

2017-10-11 13:06:49 +08:00

@unstop 网站的 navbar 里点 logo 回不到主页……

unstop

2017-10-11 13:09:24 +08:00

@kokdemo 注册页面对么？这是为了提高注册转化率，故意这样设计的。

kokdemo

2017-10-11 14:08:36 +08:00

@unstop ……一脸懵 b 啊……想看一下介绍都看不到……

unstop

2017-10-11 14:33:15 +08:00 via iPhone

@kokdemo 因为一般用户不会直接落地在注册页面...

torbrowserbridge

2017-10-11 15:41:31 +08:00 via Android

并不适合人数很多的场景

unstop

2017-10-11 16:02:18 +08:00

@torbrowserbridge 超过 100 人的话就不太可能将所有参与抽奖的人全展示在同一屏内。

不过似乎也没有更好的解决方案？

torbrowserbridge

2017-10-11 16:41:45 +08:00 via Android

@unstop 可以在光圈跳动的时候，同时切换每个随机位置的头像

loading

2017-10-11 16:59:24 +08:00

不如直接开 concole,运行原生随机函数，即时出数据，大家都没意见。

dyxang

2017-10-11 20:49:43 +08:00 via Android

@unstop 为何不弄个默认头像？

dyxang

2017-10-11 20:51:01 +08:00 via Android

@unstop 或者像 gmail 根据用户名生成的字母头像一样弄个什么的

dyxang

2017-10-11 20:57:41 +08:00 via Android

为何不在结果之后播放一段庆祝音频？

unstop

2017-10-11 21:23:30 +08:00

@dyxang 这些想法都很棒！欢迎给我提 pull request。

dyxang

2017-10-11 21:32:41 +08:00 via Android

@unstop 但是
我没有 github 帐号
我不会 js
sorry

derpc

2017-10-11 22:19:46 +08:00

直接双击就可以钦定了:doge

sheyong

2017-10-11 22:56:16 +08:00

一次抽多个人呢支持吗

unstop

2017-10-12 03:59:43 +08:00 via iPhone

@sheyong 目前不支持，后续可能会增加。

&bsp; 36

unique

2017-10-12 09:29:19 +08:00 via iPhone

这个不错，star 了

inmyfree

2017-10-12 17:20:29 +08:00

楼主，我很给力的，每个项目都点了两下 star。。。。

only0jac

2017-10-12 23:42:49 +08:00 via Android

图怎么截的？

mfhh

2017-11-08 12:43:43 +08:00

Lottery.js 开源的 Javascript 抽奖小应用

Lottery.js

简介

预览

链接

缘起