Hello, 🙎🏻♀️🙋🏻♀ 🙆🏻♀

I love knowledge transfer and am learning to write, ClyingDeng stool!

Lead everyone to hand lift a lottery program!

There are prizes for comments! There are prizes for comments! There are prizes for comments! Important things say three times!

🙆♀️ let the random numbers run

First of all, for random numbers to work, you have to have a random number! We first put the name information of the number of lottery winners into an array and regenerate it into a random number within the length of the array.

let data = ref([
   {
     name: 'Nancy'.img: './assets/imgs/1.jpeg',},... {name: 'Aarn'.img: './assets/imgs/12.jpeg',}])function run() {
  let random = Math.floor(Math.random() * data.value.length)
  lucky.value = data.value[random]
}
Copy the code

Obtain a random user information in the array by generating random number. We want random numbers to be executed continuously, using timers. The timer is reacquired by a random user every 100 milliseconds.

let timer: number | null = null
timer = setInterval(() = > {
  run()
}, 100)
Copy the code

This way we can see the user’s name randomly displayed on the page.

🎯 Start End Stop

Add two buttons on the page to start and stop the draw. Next step up, we can see that the page starts to randomly select users as soon as it comes in. To upgrade, we start the timer manually when we click the Start button. However, this may require clicking the start button more than once, so we also need to make sure that if the timer is already on, we don’t do anything. When we click stop, we just need to manually clear the timer and recycle the bound variables.

function start() {
  if (timer) return
  timer = setInterval(() = > {
    run()
  }, 100)}function stop() {
  if (timer) clearInterval(timer)
  timer = null
}
Copy the code

As you can see, the start and stop work out perfectly!

🤍 🖤 🤎 💜 💙 💚 💛 🧡 💖 draw

Spruce up the page. We can display the user’s avatar on the page:

Complete the logic code:

<template>
  <div class="show">
    <div class="title">Lucky user</div>
    <div class="img" v-if="lucky.img">
      <img :src="lucky.img" alt="" />
    </div>
    <div class="name">{{ lucky.name }}</div>
  </div>
  <button @click="start">start</button>
  <button @click="stop">stop</button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    let data = ref([
      {
        name: 'Nancy'.img: './assets/imgs/1.jpeg',},... {name: 'Aarn'.img: './assets/imgs/12.jpeg',}])let lucky = ref({})
    let timer: number | null = null
    function start() {
      if (timer) return
      timer = setInterval(() = > {
        run()
      }, 100)}function run() {
      console.log(data.value.length)
      let random = Math.floor(Math.random() * data.value.length)
      lucky.value = data.value[random]
    }
    function stop() {
      console.log('stop')
      if (timer) clearInterval(timer)
      timer = null
    }
    return { lucky, start, stop }
  },
})
</script>
Copy the code

At this point, our small demo lottery on the completion of pull! ✌ ✌ ✌

For those of you who are interestedPay attention to myOh! A steady item for the front end (●’◡’●). If not, please give me your advice.

🎉🎉🎉 Interactive prizes

Finally, because the stool bench had the opportunity to apply for to please find | do you have a chance to free to apply for the nuggets peripheral present activity places, if comments area more than 10 people interaction, as of September 12 noon, I will be in the comments section randomly a lucky users, giving the nuggets a new badge 2 pieces (no need to bear the freight oh) 😁! Underline 👇 all see the article’s children can comment in the comments section oh! Hurry up and act! 🤗 🤗 🤗

In order to ensure fairness and fairness, I will put the names of all students who leave comments in the comment section into the lottery program after September 12, and upload the videos of lucky users to this program.