年会快到了,教你3分钟搞一个高大上的3D抽奖!

编程技术 专栏收录该内容
81 篇文章 1 订阅

前言
网上大佬又双叒开源了一个抽奖项目,动动手指就可以看到效果,特分享安利一波 ~

I、先看效果

5倍速度播放:

II、3分钟搞定

1、安装Node.js

下载并安装即可。

Windows X64下载地址:
https://nodejs.org/dist/v14.15.4/node-v14.15.4-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/ 即可看到上面动图效果。

III、别人咋访问

很显然,上面的地址只有我们的本地电脑才能访问。

那么,如何让年会的电脑能通过浏览器访问呢??

这里就需要使用到内网穿透

什么是内网穿透这里就不赘述,感兴趣的小伙伴可以百度下

上期文章我们有说到uTools这款工具,哎,刚好它就有内网穿透功能!!!

不清楚uTools是什么的小伙伴,可以看下之前的文章:【福利分享·229个工具】uTools:生命有限,给咱生活提个速!!!

通过上面的地址,任意可以上网的电脑就都可以访问到你的抽奖站点啦 !!!

IV、附录

使用技术

  • Node + Express + Three.js
  • 后台通过Express实现
  • 前端通过Three.js实现3D抽奖球

功能描述

  • 可将抽奖结果进行保存实时下载到excel
  • 已抽取人员不在参与抽取,抽中的人员不在现场可以重新抽取
  • 刷新或者关掉服务器,会保存当前已抽取的数据,不会进行数据重置,只有点击界面上的重置按钮,才能重置抽奖数据
  • 每次抽取的奖品数目可配置
  • 抽取完所有奖品后还可以继续抽取特别奖(例如:现在抽取红包,追加的奖品等),此时默认一次抽取一个

源码地址

https://gitee.com/neequ_admin/lottery


好了,今天的分享就到这儿了。

如果喜欢本文,请关注公众号:开猿笔记,里面会有持续更新噢!

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
2018最新微信墙微信墙婚庆会议大屏幕3D签抽奖摇一摇微信墙源码。这是我在淘宝面花200大洋买php版本5.4以亲测可用抽奖摇一摇。都可以使用。绝对没有问题。之前在网2天时间也找一些类似有免费下载也有包括在csdn面用5个资源分下载类似发现都不能用至少我在本地或有服务器都没有调试成功一下他们代码发现代码用是公众号帐号和密码来模拟微信登陆来获取用户信息。微信已经在2016年就已经停止模似登陆登陆微信公众号必须要扫描后管理员确认后才可登陆。所以那些代码都不能用。有些有csdn这些代码基本不能用(可能2015年前可以用但是现在不能用)感觉太不负责任都是骗积分。当时因为公司年会要弄个微信墙及现在抽奖活动找这个代码也很辛苦相信大家也一样辛苦所以把代码放出来供大家下载学习使用。这个代码我是在淘宝本身内置第三方微信公众号授权所以如果公众号没有微信认证也可以用直接扫码就可以发送微信墙弹幕不会出现第三方公众号信息。如果微信公众号认证就用自己后台可以配置填写公众号appid和appsecret即可。好不多说大家下载使用如果不能用我退积分。不清楚大家可以在评论区留言。
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值