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:重新加载配置文件。主要用于临场增加奖项
评论0