Skip to content

hursing/raffle

Repository files navigation

年会抽奖程序

200行HTML+JavaScript写个桌面程序

需求分析

  1. 多轮抽奖,每轮只有3个环节:展示奖品图,人名闪动,停止闪动确定中奖名单
  2. 中奖分级,例如试用期员工不能中二等奖或以上
  3. 每轮抽奖的中奖人数不同。每个人只能中一次奖
  4. 可临时加场,现场输入奖品名、数量。额外窗口输入,避免被观众看到修改过程。
  5. 本地记录每轮的奖品和中奖名单
  6. 全屏显示。不确定现场的屏幕分辨率,故核心部分固定1024*768,居中显示;背景拉伸铺满全屏。

demo

技术选型

搞桌面程序第一时间就想到了这几个框架:Java SwingPython TkinterC++ QtC# WPF。虽然都可行,但感觉开发不够便捷。而且谁知道年会现场那台电脑有没有对应的运行时库。

最后经同事给的灵感想到了用JavaScript做,选定了node-webkit,即nw.js。没有选electron是它需要搭开发环境。我只想用个文本编辑器快点搞出来而已……

既然连开发环境都懒得搭,那自然也用不了VueReactAngular。实际上也没必要,小学生才用牛刀杀鸡。

使用方法

启动

Windows的启动方法:到 https://nwjs.io/ 下载node-webkit,解压出来,把代码的整个目录拖动到nwjs.exe上。

其它操作系统按官方说明做:

cd /path/to/your/app
/path/to/nw .

/path/to/nw is the binary file of NW.js. On Windows, it’s nw.exe; On Linux, it’s nw; On Mac, it’s nwjs.app/Contents/MacOS/nwjs.

按键

  • f:切换全屏
  • 4:下一步。进入下一轮抽奖的展示奖品图片、进入名单滚动。
  • 空格:立刻停止名单滚动。即确定中奖人员。
  • 8:重新加载配置文件。主要用于临场增加奖项
  • 1:上一步,用来看看上个奖项的情况

核心文件说明

  • index.html:所有代码都在这
  • steps.json:流程配置文件,应该一看就懂。中奖后此文件会被修改,包含中奖名单。如果需要加奖项,不用退出程序,编辑完这个文件后按8就能重新加载配置,继续抽。
  • names.ini:人员名单与可中奖等级,等级数字越小表示可中更大的奖。中奖后此文件会被修改,删除已中奖的人

PS:由于我是在mac上搞的,所以文件保存是以LF换行的。在Windows用记事本来打开的话会不显示换行,因为不是CRLF。可以下载个notepad++来编辑。

TODO

  • 启动的时候“设置窗口大小和位置”会造成闪动,可以做得体验好点,虽然没必要
  • 更多的可动态设置项
  • 启动方式还是有点别扭,可打包一下程序

代码

程序步骤说明:

  1. 调整窗口大小和位置
  2. 读取配置文件,得到人员名单和抽奖轮次信息
  3. 进入第1轮。通过按键4和空格进入下个环节
  4. 用state变量来记录状态:展示图片、滚动名单、显示中奖名单

Releases

No releases published

Packages

No packages published