年会快到了,教你3分钟搞一个大气的3D抽奖!
I、先看效果前言 网上大佬又双叒开源了一个抽奖项目,动动手指就可以看到效果,特分享安利一波 ~
5倍速度播放:
II、3分钟搞定1、安装Node.js
下载并安装即可。
Windows X64下载地址:https://nodejs.org/download/release/v10.15.3/node-v10.15.3-x64.msi
注意:在Windows上安装时务必选择全部组件,包括勾选Add to Path
。
2、程序下载
下载地址:https://gitee.com/neequ_admin/lottery/repository/archive/master.zip
3、解压,并录入员工
•在这个Excel表格:lottery/product/src/data/user.xlsx
,录入你们公司的员工信息•在这个配置文件:lottery/server/config.js
,录入奖品信息
4、启动抽奖程序
在当前目录打开cmd命令行,执行:
cd lottery
/**安装插件**/
cd server
npm install
/**安装插件**/
cd ../product
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
npm install
/**打包**/
npm start
cd dist
/**运行**/
node ../../server/index.js 80
浏览器输入:http://127.0.0.1/
即可看到上面动图效果。
很显然,上面的地址只有我们的本地电脑才能访问。
那么,如何让年会的电脑能通过浏览器访问呢??
这里就需要使用到内网穿透
!
什么是内网穿透这里就不赘述,感兴趣的小伙伴可以百度下
上期文章我们有说到uTools
这款工具,哎,刚好它就有内网穿透功能!!!
不清楚uTools是什么的小伙伴,可以看下之前的文章:【福利分享·229个工具】uTools:生命有限,给咱生活提个速!!!
通过上面的地址,任意可以上网的电脑就都可以访问到你的抽奖站点啦 !!!
IV、附录使用技术
•
Node
+Express
+Three.js
•后台通过Express
实现•前端通过Three.js
实现3D抽奖球
功能描述
•可将抽奖结果进行保存实时下载到
excel
中•已抽取人员不在参与抽取,抽中的人员不在现场可以重新抽取•刷新或者关掉服务器,会保存当前已抽取的数据,不会进行数据重置,只有点击界面上的重置按钮,才能重置抽奖数据•每次抽取的奖品数目可配置•抽取完所有奖品后还可以继续抽取特别奖(例如:现在抽取红包,追加的奖品等),此时默认一次抽取一个
源码地址
https://gitee.com/neequ_admin/lottery
如果喜欢本文,请关注公众号:开猿笔记,里面会有持续更新噢!