Требование всегда срочное.Вчера я был на собрании и получил требование о рабочей силе.У вас есть время провести лотерею?(Сейчас в 16:12 годовое собрание начинается в 17:00.) Прежде чем я смогу отказаться ,персонал добавил что я не могу.Больше не будем разыгрывать лотерею.Я сразу почувствовал,что если не разберусь с ритмом,что меня зарежут мои братья,я молча удалил новость что у меня не было времени сделать, и переписал для меня список из четырех символов.
К счастью, в прошлом и позапрошлом году мне очень повезло, что меня не оплевали наповал.Времени на перезапуск программы в прошлом году (требуется собрать все штатные аватарки и пс) явно не хватило.К счастью , у меня еще есть некоторый опыт.Встреча закончилась в 4:30.
Хорошо, давайте начнем!
Подумайте еще раз
1. Хорошо выглядеть нехорошо, не ждите эффекта от программистов, у которых нет времени на проектирование. 2. Кнопка запуска стиля, кнопка остановки, список списка персонала и список списка лотереи. 3. Нажмите, чтобы начать, во-первых, перемешанный список списка гарантирует, что порядок списка лотереи каждый раз разный, чтобы они не заподозрили, что я обманываю для взвешивания (в ТМ нет времени на взвешивание в течение половины час). Времени мало, а задачи тяжелые, поэтому используйте метод перетасовки lodash напрямую, чтобы испортить представление последовательности. 4. Должны быть случайные числа.Каждые 200 мс случайное число от 0 до количества людей (длина массива случайное целое) 5. Победители и проигравшие хранятся в двух массивах в localStorage, чтобы предотвратить обновление страницы во время лотереи.Было бы неловко, если бы страница не хранилась локально в чистом статическом состоянии.Список победителей 6. Щелкните конец, чтобы выбрать текущее случайное число и выделить его на странице.
Далее посмотрите на общий код реализации
//依赖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>
испытать эффект
Требования соблюдены, и после проверки на месте проблем пока не обнаружено! Если у вас есть какие-либо вопросы, не стесняйтесь ответить на сообщение!