作者丨大道至简1024
来源丨1024驿站(ID:trans1024)
背景
临近年末,又到了各大公司举办年会的时候了。对于年会,大家最关心的应该就是抽奖了吧?虽然中奖概率通常不高,但总归是个机会,期待一下也是好的。
最近,我们部门举办了年会,也有抽奖环节。临近年会的前几天,Boss 突然找到我,说要做一个抽奖程序,部门年会要用。我当时都懵了:就三天时间,万一做的程序有bug,岂不是要被现场百十号人的唾沫给淹死?没办法,Boss 看起来对我很有信心,我也只能硬着头皮上了。
需求
要一个设置页面,包括设置奖项、参与人员名单等。
如果单个奖项中奖人数过多,可分批抽取,每批人数可设置。
默认按奖项顺序抽奖,也可选定某个奖项开始。
可删除没到场的中奖者,同时可再次抽取以作替补。
可在任意奖项之间切换,可查中奖记录名单
支持撤销当前轮次的抽奖结果,重新抽取。
实现
身为 Web 前端开发,自然想到用 Web 技术来实现。本着不重复造轮子的原则,首先求助 Google,Github。搜了一圈好像没有找到特别好用的程序能直接用的。后来看到一个 Github 上的一个项目,用 TagCanvas 做的抽奖程序,界面挺好,就是逻辑有问题,点几次就崩溃了。代码是不能拿来用了,标签云这种抽奖形式倒是可以借鉴。于是找来文档看了下基本用法,很快就集成到页面里了。
由于设置页面涉及多种交互,纯手写太费时间了,直接用框架。平时 Element UI 用得比较多,自然就用它了。考虑到年会现场可能没有网络,就把框架相关的JS和CSS都下载到本地,直接引用。为了快速开发,也没搭建 webpack 构建工具了,直接在浏览器里引入JS。
"stylesheet" href="css/reset.css" />
rel="stylesheet"
href="js/element-ui@2.4.11/lib/theme-chalk/index.css"
/>
1设计数据结构
奖项列表 awards
[{
"name": "二等奖",
"count": 25,
"award": "办公室一日游"
}, {
"name": "一等奖",
"count": 10,
"award": "BMW X5"
}, {
"name": "特等奖",
"count": 1,
"award": "深圳湾一号"
}]
参与人列表 members
[{
"id": 1,
"name": "张三"
}, {
"id": 2,
"name": "李四"
}]
待抽奖人员列表players
,是members
的子集:
[{
"id": 1,
"name": "张三"
}]
抽奖结果列表result
,按奖项顺序索引:
[[{
"id": 1,
"name": "张三"
}], [{
"id": 2,
"name": "李四"
}]]
2参数配置页面
包括奖项设置和参与人员列表。
3抽奖页面具体代码可以去我的 Github 项目
https://github.com/kaysonli/lucky-ball
查看,方便的话可以点个 star。
也可以先体验一下(在 PC 上打开):
http://luckyball.surge.sh/index.html
由于时间仓促,代码写得比较将就。
年会当天抽中了四等奖:1000元购物卡。我是不是该庆幸自己没中特等奖……
祝大家好运!