The demand is always urgent. I was in a meeting yesterday and received the manpower demand. Do you have time to do a lottery? (Now 4:12 p.m., the annual meeting begins at five.) Before I refused, the personnel department added a sentence that we would not draw if we could not do it. I erased the instant feeling that if we could not do it, we would be stabbed to death by our brothers. I silently deleted the message that I had no time to do and re-wrote the four-word list to me.
Fortunately, I was lucky not to be slapped in the face on the spot for the whole year before last year. It obviously didn’t take enough time to restart last year’s program (requiring the collection of all members’ heads and photoshop). Fortunately, I had some experience, and the meeting ended at 4:30.
All right, enough bullshit and let’s get to work!
Let’s think about it
1, good is not good, don’t expect no design no time programmer to come out of the effect. 2. Style start button, Stop button, personnel list, selected list. 3, Click Start, first, shuffle the list to ensure that the order of each lucky draw list is not the same, so as to prevent them from suspected I cheat the weight (TM half an hour where there is no time to do the weight). 5. The people who won the lottery and the people who did not win the lottery are divided into two arrays and stored in localStorage to prevent page refresh during the lottery. Pure static does not save local that scene will be awkward after each refresh if the store from the local access to the list of personnel and the winning list 6, click end to select the current random number on the page highlight.
Let’s look at the overall implementation code
// rely on 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: [
"Zhang"."Bill"."Fifty"."Daisy"."Chen qi"."Zhang steak"."Li Fourteen".King xv."Zhao 16"."Seventeen Chen"."Zhang Two three"."Li Two Four"."King 25"."Zhao Erliu"."Chan 27"."Two steaks"."Li Three four"."King Three Five"."Zhao Sanliu"."Chen Sanqi"], target: [],// Index: -1,// Current random index timer: null,// Define a timer value:' ',// Current user name status:true// Current lottery status},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>Copy the codeExperience the effect
The demand is done, and no problems have been found through the field test! Feel free to leave a comment if you have any questions!