java抽奖程序头像_半小时撸一个抽奖程序
需求总是很紧急,昨天正在开会收到人力需求,有时间做个抽奖吗?(now 下午四点12,年会五点开始。)还没能等我拒绝,人事又补了一句做不出来我们就不抽奖了,我擦瞬间感觉要是搞不出来会被兄弟们捅死的节奏,默默的删除了没时间做的消息,重新写了四个字名单给我。
还好去年前年都是我搞得很庆幸没被当场打脸,重启去年程序(需要收集全员头像并ps)时间显然不够,庆幸的是还有点经验,会议结束时间已经四点半了。
好了不扯淡了开始干活吧!
先屡一下思路
1、好看是好看不了了,别指望没设计没时间程序员搞出来的效果。
2、样式开始按钮、停止按钮、人员名单别列表、抽中名单列表。
3、点击开始,首先乱序名单列表保证每次抽奖列表顺序不一样,防止他们怀疑我作弊搞权重(就TM半小时哪有时间搞权重)时间紧任务重,直接用的lodash shuffle方法来乱序视图
4、随机数是肯定要有的,每隔200ms随机一个从0到人员个数(数组长度随机整数)
5、抽中人员和没抽中人员分两个数组存入localStorage,防止抽奖过程中刷新页面,纯静态不存本地那场面就尴尬了每次刷新完如果本次存储了从本地获取人员列表和中奖名单
6、点击end选中当前随机数在页面上高亮显示。
接下来看整体实现代码
2019抽奖程序
* {
margin: 0;
padding: 0;
}
.list-complete-item {
transition: all 1s;
display: inline-block;
border: 1px solid #ccc;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center
}
.draw-bg {
background-color: red;
transform: scale(1.5)
}
.list-complete-enter,
.list-complete-leave-to {
opacity: 0;
transform: translateY(30px);
}
.list-complete-leave-active {
position: absolute;
}
.draw {
height: 100px;
}
button {
padding: 5px 10px;
margin: 20px;
}
li {
float: left
}
.draw-list span {
display: inline-block;
padding: 10px;
background: red;
color: #fff
}
start
end
{{item}}
{{ item }}
new Vue({
el: '#list-complete-demo',
data: {
arrList: [
"张三",
"李四",
"王五",
"赵六",
"陈七",
"张扒",
"李十四",
"王十五",
"赵十六",
"陈十七",
"张二三",
"李二四",
"王二五",
"赵二六",
"陈二七",
"张二扒",
"李三四",
"王三五",
"赵三六",
"陈三七"
],
target: [],
index: -1,
timer: null,
value: '',
status: true
},
mounted() {
if (!localStorage.getItem('initData')) {
localStorage.setItem('initData', JSON.stringify(this.arrList))
} else {
this.arrList = JSON.parse(localStorage.getItem('initData'))
}
if (localStorage.getItem('drawList')) {
this.target = JSON.parse(localStorage.getItem('drawList'))
}
},
methods: {
start() {
if (this.status) {
if (this.index != -1) {
this.arrList.splice(this.index, 1)
localStorage.setItem('initData', JSON.stringify(this.arrList))
}
this.shuffle()
setTimeout(() => {
this.recursive()
}, 800)
this.status = !this.status
}
},
randomIndex: function() {
this.index = Math.floor(Math.random() * this.arrList.length)
return this.index
},
remove: function() {
this.arrList.splice(this.randomIndex(), 1)
},
shuffle: function() {
this.arrList = _.shuffle(this.arrList)
},
recursive() {
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.value = this.arrList[this.randomIndex()]
this.recursive()
}, 200)
},
end() {
if (this.status) {
return
}
clearTimeout(this.timer)
this.index = this.randomIndex()
this.value = this.arrList[this.index]
this.target.push(this.value)
localStorage.setItem('drawList', JSON.stringify(this.target))
this.status = !this.status
}
}
})
体验下效果
需求搞定,经现场测试目前没发现什么问题!如有疑问随时回复留言!
java抽奖程序头像_半小时撸一个抽奖程序相关推荐
- 随机数抽奖程序 html,半小时撸一个抽奖程序
需求总是很紧急,昨天正在开会收到人力需求,有时间做个抽奖吗?(now 下午四点12,年会五点开始.)还没能等我拒绝,人事又补了一句做不出来我们就不抽奖了,我擦瞬间感觉要是搞不出来会被兄弟们捅死的节奏, ...
- cdt规约报文用程序解析_用 Python 撸一个 Web 服务器第3章:使用 MVC 构建程序
Todo List 程序介绍 我们将要编写的 Todo List 程序包含四个页面,分别是注册页面.登录页面.首页.编辑页面.以下分别为四个页面的截图. 注册页面: 登录页面: 首页: 编辑页面: 程 ...
- python hello world程序编写_用Python编写一个简单程序
按照软件行业传统习惯,当你学习一种新的编程语言如Python时,首先编写一个"Hello World! "程序. 请执行以下步骤,以创造你的"Hello World!&q ...
- android启用其他应用程序,杀死Android上的另一个应用程序?
我试图杀死我的另一个应用程序.但是这段代码无法杀死我的另一个应用程序.我知道杀死另一个应用程序是一个坏主意.但是我有一个学习的目的,并且我试图杀死人.我的代码部分: Button runningApp ...
- 微信小程序实现跳转到另外一个小程序的方法
微信小程序实现跳转到另外一个小程序的方法 1,首先需要在当前小程序app.json中定义:需要跳转的小程序的app-id app.josn "navigateToMiniProgramApp ...
- ip地址转换数字函数 iton_c# – RabbitMQ CreateConneciton问题 – 在一个应用程序中运行,但在另一个应用程序中运行...
所以这是连接代码. var factory = new ConnectionFactory { HostName = "myserver", UserName = "te ...
- hive+mysql+速度_半小时搞定Hadoop+Mysql+Hive+Python
1. 说明 搭建过Hadoop集群的小伙伴一定知道,如果不用docker,半小时配好Hadoop+Mysql+Hive(后简称Hive)肯定是胡吹,有了Docker镜像,没有说明文档,配好了也不一定会 ...
- python爬虫爬取图片无法打开_半小时入门python爬虫爬下网站图片,不能再简单了...
阅读本文大约需要2分钟 本文旨在为没有爬虫基础的,偶尔想爬虫爬一下某个网站上的图片的初学者使用,如果你已经是对爬虫很熟悉了,下面依然有你感兴趣的东西. 我最近也才正儿八经学习了下爬虫,出于某种需要爬一 ...
- 土拍熔断意味着什么_半小时3宗地接连熔断 今日长沙土拍关键字:“焱”
来源:凤凰网房产长沙站 4月27日,注定会在2020年长沙土拍史上画下浓墨重彩的一笔. 这一天,长沙土地市场迎来出让高峰,7宗地块集中出让,包括3宗工业用地和4宗经营性用地.3宗工业用地与往常一样,上 ...
最新文章
- 我如何使用深度学习通过Fast.ai对医学图像进行分类
- 纠结的Python2.7编码与os.walk()函数的目录参数
- android o x86,ubuntu-android--make: *** [out/host/linux-x86/o...
- wex5链接mysql_wex5数据库连接自己的数据库在哪里配置的
- iOS学习之 plist文件的读写
- mysql 密码文件改成密文_数据库密码弄成密文
- 赣州师范高等专科学校计算机网络技术,赣州师范高等专科学校2021年招生简章...
- 细说JavaScript对象(2):原型对象
- 机器人带陀螺仪走钢丝_走直线很难吗?陀螺仪表示,少了它机器人连直线都走不了...
- 链接地址中的target=”_blank”属性安全性处理
- 2015年度精品 最新力作32位和64位xp,win7,win8,win10系统下载(电脑城专用版)
- 电脑常见故障及解决方法
- android自定义拨号键盘,Android拨号键盘增加魔力爱心数字
- Spring Controller get、post传参解析
- ApplePay对接java后台详细代码
- Windows 7系统和Windows 10系统的镜像下载地址集(含专业版)
- 基址变址寻址来实现暂存数据功能
- 微信小程序——获取openid
- 深入浅出极大似然估计
- 服务器显示器不亮,液晶显示器不亮的原因及维修方法简介【图解】
热门文章
- 码云最火开源项目 TOP 50,你用过哪些?
- 克隆数据库linux 不能登录,DockerSQL2017Linux容器的数据库克隆
- android中九宫格的布局,Android布局--九宫格示例.doc
- 【242期推荐】女程序员苛刻的征婚条件,男程序员不能输
- Linux大师(古鲁)话说USB发行版
- python正则获取豆瓣排行250
- 计算机全国一级b考试试题,全国版计算机等级考试一级B考前冲刺试题
- linux常驻进程与非常驻进程,Daemontools和Supervisor管理linux常驻进程
- 数字芯片是怎样设计出来的?
- WEB2.0中AJAX应用的详细探讨