需求總是很緊急，昨天正在開會收到人力需求，有時間做個抽獎嗎?（now 下午四點12，年會五點開始。）還沒能等我拒絕，人事又補了一句做不出來我們就不抽獎了，我擦瞬間感覺要是搞不出來會被兄弟們捅死的節奏，默默的刪除了沒時間做的訊息，重新寫了四個字名單給我。
還好去年前年都是我搞得很慶幸沒被當場打臉，重啟去年程式（需要收集全員頭像並ps）時間顯然不夠，慶幸的是還有點經驗，會議結束時間已經四點半了。
好了不扯淡了開始幹活吧！
先屢一下思路
1、好看是好看不了了，別指望沒設計沒時間程式設計師搞出來的效果。 2、樣式開始按鈕、停止按鈕、人員名單別列表、抽中名單列表。 3、點選開始，首先亂序名單列表保證每次抽獎列表順序不一樣，防止他們懷疑我作弊搞權重（就TM半小時哪有時間搞權重）時間緊任務重，直接用的lodash shuffle方法來亂序檢視 4、隨機數是肯定要有的，每隔200ms隨機一個從0到人員個數（陣列長度隨機整數） 5、抽中人員和沒抽中人員分兩個陣列存入localStorage，防止抽獎過程中重新整理頁面，純靜態不存本地那場面就尷尬了每次重新整理完如果本次儲存了從本地獲取人員列表和中獎名單 6、點選end選中當前隨機數在頁面上高亮顯示。
接下來看整體實現程式碼
//依賴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: [],//中獎名單
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
}
}
})
</script>
</body>
複製程式碼體驗下效果
需求搞定，經現場測試目前沒發現什麼問題！如有疑問隨時回覆留言！