博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
半小时撸一个抽奖程序
阅读量:6244 次
发布时间:2019-06-22

本文共 811 字,大约阅读时间需要 2 分钟。

需求总是很紧急,昨天正在开会收到人力需求,有时间做个抽奖吗?(now 下午四点12,年会五点开始。)还没能等我拒绝,人事又补了一句做不出来我们就不抽奖了,我擦瞬间感觉要是搞不出来会被兄弟们捅死的节奏,默默的删除了没时间做的消息,重新写了四个字名单给我。

还好去年前年都是我搞得很庆幸没被当场打脸,重启去年程序(需要收集全员头像并ps)时间显然不够,庆幸的是还有点经验,会议结束时间已经四点半了。

好了不扯淡了开始干活吧!

先屡一下思路

1、好看是好看不了了,别指望没设计没时间程序员搞出来的效果。

2、样式开始按钮、停止按钮、人员名单别列表、抽中名单列表。
3、点击开始,首先乱序名单列表保证每次抽奖列表顺序不一样,防止他们怀疑我作弊搞权重(就TM半小时哪有时间搞权重)时间紧任务重,直接用的lodash shuffle方法来乱序视图
4、随机数是肯定要有的,每隔200ms随机一个从0到人员个数(数组长度随机整数)
5、抽中人员和没抽中人员分两个数组存入localStorage,防止抽奖过程中刷新页面,纯静态不存本地那场面就尴尬了每次刷新完如果本次存储了从本地获取人员列表和中奖名单
6、点击end选中当前随机数在页面上高亮显示。

接下来看整体实现代码

    
2019抽奖程序
{
{item}}
{
{ item }}

体验下效果

Kapture-2019-01-30-at-16.06.34.gif

需求搞定,经现场测试目前没发现什么问题!如有疑问随时回复留言!

转载地址:http://xtpia.baihongyu.com/

你可能感兴趣的文章
程序员为什么要高薪?看完让你勇于为自己开价
查看>>
(八)spring cloud微服务分布式云架构- Spring Cloud 组件和概念介绍
查看>>
由 Tagged Pointer 联想到的一个问题
查看>>
Python代理IP爬虫的简单使用
查看>>
KVO探索
查看>>
前端错误与捕获
查看>>
玩一玩颜值测试
查看>>
动画和flex布局
查看>>
CSS布局
查看>>
第一篇:SpringBoot 2 x 构建工程
查看>>
你不了解的vue中的v-on事件绑定
查看>>
CAShaperLayer&UIBezierPath系列(二)
查看>>
小程序自定义组件(1)
查看>>
聊聊Elasticsearch的ProcessProbe
查看>>
首页Activity重复启动问题
查看>>
人工智能+建筑,会产生什么?
查看>>
防抖与节流
查看>>
Cocos2dx源码记录(9) CCQuadCommand
查看>>
浅谈Promise怎么取消或中断
查看>>
JavaScript——执行环境及作用域
查看>>