200行HTML+JavaScript实现年会抽奖程序

本文实例为大家分享了js实现年会抽奖程序的具体代码，供大家参考，具体内容如下

需求分析

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

技术选型

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

最后经同事给的灵感想到了用JavaScript做，选定了node-webkit，即nw.js。没有选electron是它需要搭开发环境。

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

代码开源

开源在 年会抽奖程序 。文末会贴一下当前的版本，但以github上的为准。

使用方法
启动
Windows的启动方法：到 这里 下载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：人员名单与可中奖等级，等级数字越小表示可中更大的奖。中奖后此文件会被修改，删除已中奖的人
  

TODO

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

代码

程序步骤说明：

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

html的部分：

    
 
XX公司年会
奖品描述