5e抽奖怎么没了(5E签到怎么没了)

大家好，关于5e抽奖怎么没了(5E签到怎么没了)很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于5e抽奖怎么没了(5E签到怎么没了)的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！

5e抽奖怎么没了

前言

昨天参加了公司年会，显然我啥奖项都没中，什么“优秀员工”都跟我们前端工程师无关，不然我不会在这里写文了，等等，这里为什么要用“我们”，[疑问.jpg]，前端工程师应该是评不到“优秀员工”的，[打脸.png]，如果有小伙伴获得，欢迎在评论区分享，《前端工程师如何入选优秀员工？》

先说下今年公司的奖项

一等奖 iPhone13 10名二等奖 apple Watch 30名三等级 AirPos 50 名 没有特等奖，感觉中奖率还蛮高的，那么有多少人参加呢？有 700 人？怎么有那么多人，[疑问.jpg]，我怎么记得公司只有 350 人左右，2021 招了这么多人吗？然后呢，这个抽奖程序是买的，大概花了 5000 具体不记得了，我在想这个程序给内部开发不好吗？好用得着买？算了，不纠结了，一起来看下抽奖程序是怎么实现的吧!抽奖程序

领导说开始就滚动屏幕，领导喊停就停，就这么个抽奖形式，大家都懂的。

抽奖程序

奖品数据 JSON

先定义一个 JSON 描述下奖品的情况吧

[ { name: 一等奖, count: 10, img: , time: 10, }, { name: 二等奖, count: 30, img: , time: 5, }, { name: 三等奖, count: 50, img: , time: 5, },];

time 是抽奖次数， count 是奖品数量

模拟用户

这里使用了大名鼎鼎的 faker.js 目前已经由社区维护了， 首先要安装包

npm install @faker-js/faker -D

生成700名用户

import faker from @faker-js/faker;faker.setLocale(zh_CN);const users = new Array(700).fill(null).map((item, index) => ({ id: index 1, name: faker.name.lastName() faker.name.firstName(), }));

id 要唯一，因为可能存在同名的情况

JS 实现抽奖

也就是说要从一个用户列表中随机出现几个用户

const randomCountUser = (list, count) => { let shows = []; for (let index = 0; index < count; index ) { const random = Math.floor(Math.random() * list.length); shows.push(list[random]); list[random] = list[list.length - 1]; list.length--; } return shows;};

随机用户

为什么不选择用splice？ 大多数人一开始想法都会是splice，这是个很正确也很直观的理解。但是要注意splice是性能消耗很大的操作，如果抽奖池量级一大就会明显影响性能了为什么给list[random]赋值，然后长度减一？ 我们需要把中奖的用户剥离出去，然后把数组末尾的用户填进来，最后把整个数组的长度减一，这样下一轮遍历的时候，就是个全新的数组，而且对整个数组的改动是最小的，性能消耗最小.React 实现

使用 create-react-app 创建一个项目, 并且配置 tailwindcss

npx create-react-app my-projectnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

先定义几个状态

// 当前抽几等奖奖const [current, setCurrent] = useState(awards.length - 1);const award = awards[current];// 是否结束const [over, setOver] = useState(false);// 当前抽了几次const [currentTime, setCurrentTime] = useState(0);// 是的在进行中const goingRef = useRef(false);// 已经中奖用户，拥有用户数据过滤const [winners, setWinners] = useState([]);// 中奖结果输出const [result, setResult] = useState({});// 界面展示用户const [showUsers, setShowUsers] = useState([]);// 一次抽几个const currentNumber = award.count / award.time;

按开始暂停实现

const toggle = () => { if (over) { return; } if (!goingRef.current) { if (award.count > currentWinNumber) { const winnerIds = winners.map((w) => w.id); let others = winnerIds.length ? users.filter((u) => !winnerIds.includes(u.id)) : users; goingRef.current = setInterval(() => { setShowUsers(randomCountUser(others, currentNumber)); }, 200); } else { if (current > 0) { setCurrentTime(0); setShowUsers([]); setCurrent(current - 1); } else { setOver(true); } } } else { clearInterval(goingRef.current); goingRef.current = false; setWinners([...winners, ...showUsers]); setResult((prev) => { let sumWinners = prev[award.name] || []; sumWinners = sumWinners.concat(showUsers); return { ...prev, [award.name]: sumWinners, }; }); setCurrentTime(currentTime 1); } };使用 tailwind CSS

使用 grid 布局 place-items-stretch 这个 class 可以让元素铺满整个区域

grid 布局

总结

这就总结了，这么快吗？ 还没到100行代码，老板买的抽奖程序，就这么简单吗？是否有内定名额？好吧，那我们来增加一个内定名额吧！

如何100%中奖,

增加内定参数

const suerData={ '三等奖':[701,702]}

701 和 702 是我后面增加的2个用户，后面我希望这 2 个用户获得三等奖

自定义 hooks

其实抽奖的核心都是随机数，我们只需要定义入参和出参，抽奖过程中的参数我们不关心， 所以们可以抽取出一个自定义 hook。

输入

users 所有用户awards 所有奖项sureData 内定名额

输出

toggle 开始或停止award 当前抽的奖项showUsers 显示的用户result 中奖结果

const reducer = (state, payload) => ({ ...state, ...payload });function useLottery(users, awards, sureData = {}) { // 是的在进行中 const goingRef = useRef(false); const [state, setState] = useReducer(reducer, { current: awards.length - 1, over: false, //是否结束 currentTime: 0, // 当前抽了几次 winners: [], // 已经中奖用户，拥有用户数据过滤 result: [], // 中奖结果输出 showUsers: [], // 界面展示用户 sure: sureData, }); const { current, over, currentTime, winners, result, showUsers, sure } = state; // 当前抽几等奖奖 const award = awards[current]; // 一次抽几个 const currentNumber = award.count / award.time; //currentWinNumber const currentWinNumber = currentTime * currentNumber; const toggle = () => { if (over) { return; } if (!goingRef.current) { if (award.count > currentWinNumber) { const winnerIds = winners.map((w) => w.id); let others = winnerIds.length ? users.filter((u) => !winnerIds.includes(u.id)) : users; goingRef.current = setInterval(() => { setState({ showUsers: randomCountUser(others, currentNumber), }); }, 200); } else { if (current > 0) { setState({ currentTime: 0, showUsers: [], current: current - 1, }); } else { setState({ over: true, }); } } } else { clearInterval(goingRef.current); goingRef.current = false; // 最终显示用户，为了可以直接修改 let finailyShowUsers = showUsers; let finailySureData = { ...sure }; // 如果有内定名额逻辑 if (Array.isArray(sure[award.name])) { finailyShowUsers = showUsers.map((p, index) => { let sureUser; sureUser = sure[award.name][index] ? users.find((u) => u.id === sure[award.name][index]) : undefined; if (sureUser) { finailySureData[award.name] = sure[award.name].filter( (id) => id !== sureUser.id ); return sureUser; } else { return p; } }); } let sumWinners = result[award.name] || []; sumWinners = sumWinners.concat(finailyShowUsers); setState({ winners: [...winners, ...finailyShowUsers], showUsers: finailyShowUsers, currentTime: currentTime 1, sure: finailySureData, result: { ...result, [award.name]: sumWinners, }, }); } }; return { toggle, result, award, showUsers, };}测试

使用 hooks

const { toggle, award, showUsers, result } = useLottery(users, awards, { 三等奖: [701, 702], });

抽奖结果

发布 npm 包

当然这个hook 我们可以发布一个 npm 包，未来说不定会开发移动端的抽奖页面，我们可以公用这个抽奖逻辑，只需要重新写视图部分就好了 在发包之前，还需要对这个 hook 进行测试，这里我使用 @testing-library/react-hooks，在这里就不展开叙述了，先预留一篇文章《如何测试 react hooks？》

最后

通过本文我学会了

发布一个 react hooks npm 包使用 github action 自动发布 npm 包使用 github pages 部署预览页面所有的抽奖程序都是随机数是程序就可能会有内定名额

抽奖程序 plus（附加内定名额） 我也免费赠送给大家，希望各位喜欢。

体验地址：npm: @maqibin/react-use-lotterygithub:

全文结束, 记得点赞 . 希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。

5e抽奖怎么没了

作为一个只用眼睛玩儿（看视频、看直播）CSGO的玩家，我发现了一个惊人的事情，B站的CSGO热门视频的开头都是浮夸的网站开箱视频！这不是赤裸裸的诱惑我去开箱么！作为一个优秀的（贫穷的）玩家，看到这花花绿绿的刀我能忍住吗？我不能，但是我的钱包可以！今天我就来扒一扒CSGO网站开箱和在STEAM里开箱有什么不同，让大家看清开箱的真实面目！

看看这完美无瑕的绿宝石刺刀，你心动了吗？钱包：不，你不心动。心动也跟我没得关系，你以为网站里真的有完美无瑕宝石吗？不存在的！

网站是什么地方大家心里没点数吗？这不是慈善晚会，网站是要恰饭的，网站怎么会给你放那些完美无瑕超低磨损世界品质的皮肤呢？网站当然只是会在同类皮肤里挑最便宜的那种抽给你啊！

但是呢，作为一个贫穷的人，看着主播们各种花式开箱，实在是心痒难耐！STEAM官方的箱子一把就17块，实在是舍不得啊（G胖实在太黑了，不是都市就是非洲部落）！最终还是没忍住诱惑点开了某开箱网站。

我寻思我3.5块也不要什么龙刺宝石刀，随便给我红线什么的我也知足了。但我发现，网站箱子内皮肤饰品的价值上限由箱子本身的价格决定，3.5的箱子最高只能开出来20 的皮肤。这一点和STEAM就大不一样了，STEAM可是可以单车变火箭的。STEAM一发入魂宝石爪刀的人也不是没有，但是在网站开箱的话这种情况是不会出现的。

网站恰饭的手段要比G胖高明很多，开出皮肤的价格总会比你开箱的价格低一点点，给你一种没亏多少的错觉，偶尔还会开出高于开箱价格的皮肤，此时你就会觉得赚到了。网站深谙积少成多的道理，慢慢的榨取你的价值。

G胖就非常简单粗暴，皮肤就在箱子里，概率我也告诉你非常低，低到离谱，你有种来开啊！G胖像一个贱贱的家伙儿，在那儿嘲讽你，用低劣的激将法来刺激你，但你总会忍不住上当。网站则像一个耐心的小姐姐，一步一步的诱惑你。

还有就是，网站开箱取回一般都要等7天（STEAM交易限制），网站开箱其实就是将现有的皮肤拿来抽奖，你开到的都是别人手中的皮肤。而你在STEAM开箱，皮肤能直接到你游戏账号不说，最重要的是开出来的这个皮肤是全新的，没人染指过的。

STEAM开箱也更为安全，只要你的资金来源没问题，你开箱所得的皮肤就不会被封，。网站开箱你可能会遇到网站跑路拒不发货，网站发黑货你拿到手后被红信这类的奇葩事件，你可能会受到一定的损失。

网站开箱是不受G胖保护的，属于玩家的私下交易。所以，网络中充斥着大量的诈骗网站引诱你开箱，有的只是骗你的钱，更过分的不但骗你的钱还会搬空你的STEAM库存。所以不建议玩家在网站开箱。

总结一下，网站开箱可以便宜一些但是奖品上限不高，可以用同样的钱开更多的箱子，体验开箱的快感。但是网站本身不受保护，安全很难保证。STEAM官方开箱概率更低但是上限更高。STEAM开箱有监管，玩家的利益有保障，不会平白无故受损。

但是，开箱只是娱乐，不能致富！想要什么皮肤还是直接买最划算，不要妄图通过开箱一夜暴富，不论是G胖还是网站都是要恰饭的，并不是慈善家！最后要问一句（有人能克制住开箱的冲动？）：你们更喜欢在网站还是官方开箱？

关于5e抽奖怎么没了(5E签到怎么没了)到此分享完毕，希望能帮助到您。