阅读 20119

公司年会用了我的抽奖程序,然后我中奖了……

这是我去年写的代码和文章,眼看又到年底抽奖季了,翻出来洗洗还能再用

背景

临近年末,又到了各大公司举办年会的时候了。对于年会,大家最关心的应该就是抽奖了吧?虽然中奖概率通常不高,但总归是个机会,期待一下也是好的。

最近,我们部门举办了年会,也有抽奖环节。临近年会的前几天,Boss 突然找到我,说要做一个抽奖程序,部门年会要用。我当时都懵了:就三天时间,万一做的程序有bug,岂不是要被现场百十号人的唾沫给淹死?没办法,Boss 看起来对我很有信心,我也只能硬着头皮上了。

需求

  1. 要一个设置页面,包括设置奖项、参与人员名单等。
  2. 如果单个奖项中奖人数过多,可分批抽取,每批人数可设置。
  3. 默认按奖项顺序抽奖,也可选定某个奖项开始。
  4. 可删除没到场的中奖者,同时可再次抽取以作替补。
  5. 可在任意奖项之间切换,可查中奖记录名单
  6. 支持撤销当前轮次的抽奖结果,重新抽取。

实现

身为Web前端开发,自然想到用Web技术来实现。本着不重复造轮子的原则,首先求助Google,Github。搜了一圈好像没有找到特别好用的程序能直接用的。后来看到一个Github上的一个项目,用 TagCanvas 做的抽奖程序,界面挺好,就是逻辑有问题,点几次就崩溃了。代码是不能拿来用了,标签云这种抽奖形式倒是可以借鉴。于是找来文档看了下基本用法,很快就集成到页面里了。

由于设置页面涉及多种交互,纯手写太费时间了,直接用框架。平时 Element UI 用得比较多,自然就用它了。考虑到年会现场可能没有网络,就把框架相关的JS和CSS都下载到本地,直接引用。为了快速开发,也没搭建webpack构建工具了,直接在浏览器里引入JS。

    <link rel="stylesheet" href="css/reset.css" />
    <link
      rel="stylesheet"
      href="js/element-ui@2.4.11/lib/theme-chalk/index.css"
    />
    <script src="js/polyfill.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/element-ui@2.4.11/lib/index.js"></script>
    <script src="js/member.js"></script>
复制代码
  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": "李四"
}]]

复制代码
  1. 设置页面 包括奖项设置和参与人员列表。

image.png

  1. 抽奖页面
    image.png

具体代码可以去我的Github项目 查看,方便的话可以点个 star。也可以现在体验一下。由于时间仓促,代码写得比较将就。

年会当天抽中了四等奖:1000元购物卡。我是不是该庆幸自己没中特等奖……

有个小小的请求

在掘金已经写了20多篇技术文章了,承蒙大家厚爱,有过几篇阅读数过万的文章,总阅读数也突破了10万。在这里非常感谢各位的金手指!但是也有个小小的遗憾,每篇文章后面我都留了我的微信公众号1024译站二维码,但不知道为什么关注的人非常少。要是每篇读者有10%的人来关注,估我计做梦都会笑醒吧,哈哈……像极了小时候的梦想“要是全国每人给我一块钱,我就有好多个亿了!”如果发生了,只能说是个奇迹。现在我就有这个疯狂的想法,想邀请你来一起创造这个奇迹!只要动动你的金手指,关注下1024译站这个公众号,就能第一时间收到我用心创作的技术干货!不花一分钱!微信最近也推出了付费阅读的功能,说明优质内容收费是大趋势,以后免费的优质内容越来越少了!我也建了微信粉丝群,如果真的发生奇迹,必定倾情回馈!二维码就在下面,手机扫起来,一起见证奇迹!

微信公众号:1024译站

文章分类
前端
文章标签