需求總是很緊急，昨天正在開(kāi)會(huì)收到人力需求默刚，有時(shí)間做個(gè)抽獎(jiǎng)嗎?（now 下午四點(diǎn)12甥郑，年會(huì)五點(diǎn)開(kāi)始。）還沒(méi)能等我拒絕荤西，人事又補(bǔ)了一句做不出來(lái)我們就不抽獎(jiǎng)了澜搅，我擦瞬間感覺(jué)要是搞不出來(lái)會(huì)被兄弟們捅死的節(jié)奏，默默的刪除了沒(méi)時(shí)間做的消息邪锌，重新寫(xiě)了四個(gè)字名單給我勉躺。
還好去年前年都是我搞得很慶幸沒(méi)被當(dāng)場(chǎng)打臉，重啟去年程序（需要收集全員頭像并ps）時(shí)間顯然不夠觅丰，慶幸的是還有點(diǎn)經(jīng)驗(yàn)赂蕴，會(huì)議結(jié)束時(shí)間已經(jīng)四點(diǎn)半了。
好了不扯淡了開(kāi)始干活吧舶胀！
先屢一下思路
1概说、好看是好看不了了，別指望沒(méi)設(shè)計(jì)沒(méi)時(shí)間程序員搞出來(lái)的效果嚣伐。
2糖赔、樣式開(kāi)始按鈕、停止按鈕轩端、人員名單別列表放典、抽中名單列表。
3、點(diǎn)擊開(kāi)始奋构，首先亂序名單列表保證每次抽獎(jiǎng)列表順序不一樣壳影，防止他們懷疑我作弊搞權(quán)重（就TM半小時(shí)哪有時(shí)間搞權(quán)重）時(shí)間緊任務(wù)重，直接用的lodash shuffle方法來(lái)亂序視圖
4弥臼、隨機(jī)數(shù)是肯定要有的宴咧，每隔200ms隨機(jī)一個(gè)從0到人員個(gè)數(shù)（數(shù)組長(zhǎng)度隨機(jī)整數(shù)）
5、抽中人員和沒(méi)抽中人員分兩個(gè)數(shù)組存入localStorage径缅，防止抽獎(jiǎng)過(guò)程中刷新頁(yè)面掺栅，純靜態(tài)不存本地那場(chǎng)面就尷尬了每次刷新完如果本次存儲(chǔ)了從本地獲取人員列表和中獎(jiǎng)名單
6、點(diǎn)擊end選中當(dāng)前隨機(jī)數(shù)在頁(yè)面上高亮顯示纳猪。
接下來(lái)看整體實(shí)現(xiàn)代碼
//依賴(lài)js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://lib.baomitu.com/lodash.js/4.14.1/lodash.min.js"></script>
<body>
<div id="list-complete-demo" class="demo">
<button v-on:click="start">start</button>
<button v-on:click="end">end</button>
<div class="draw-list">
<span v-for="item in target">{{item}}</span>
</div>
<transition-group name="list-complete" tag="p">
<span v-for="item in arrList" v-bind:key="item" class="list-complete-item" :class="{'draw-bg': item == value}">
{{ item }}
</span>
</transition-group>
</div>
<script>
new Vue({
el: '#list-complete-demo',
data: {
arrList: [
"張三",
"李四",
"王五",
"趙六",
"陳七",
"張扒",
"李十四",
"王十五",
"趙十六",
"陳十七",
"張二三",
"李二四",
"王二五",
"趙二六",
"陳二七",
"張二扒",
"李三四",
"王三五",
"趙三六",
"陳三七"
],
target: [],//中獎(jiǎng)名單
index: -1,//當(dāng)前隨機(jī)索引
timer: null,//定義一個(gè)定時(shí)器
value: '',//當(dāng)前人員名
status: true//當(dāng)前抽獎(jiǎng)狀態(tài)
},
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
}
}
})
</script>
</body>
體驗(yàn)下效果
需求搞定氧卧，經(jīng)現(xiàn)場(chǎng)測(cè)試目前沒(méi)發(fā)現(xiàn)什么問(wèn)題！如有疑問(wèn)隨時(shí)回復(fù)留言氏堤！
