?‍♀️让随机数跑起来

首先，想让随机数跑起来，得先有个随机数啊！
我们先将抽奖的人数名字信息放到一个数组中，再生成一个数组长度以内的随机数数字。

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]
}
复制代码

通过生成随机数的random，来获取数组中的随机一个用户信息。
我们想让随机数不断执行，可以通过定时器的方式。每隔100毫秒让定时器重新获取一个随机用户。

let timer: number | null = null
timer = setInterval(() => {
  run()
}, 100)
复制代码

这样我们在页面上就可以看到用户的姓名在页面上随机展示。

?开始 End 停止

在页面上添加两个按钮，用于开始抽奖和停止抽奖。
接着上步走，我们可以看到页面是一进来就开始随机抽取用户，升级一下，我们在点击开始按钮时，在手动开启定时器。但是这样可能会点击多次的开始按钮，因此，我们还需要判断一下，如果定时器已经开启，那么就不做任何操作。
在我们点击停止时，也只需要将定时器手动清除，并将绑定的变量回收即可。

function start() {
  if (timer) return
  timer = setInterval(() => {
    run()
  }, 100)
}
function stop() {
  if (timer) clearInterval(timer)
  timer = null
}
复制代码

可以看到，开始和停止就这样完美解决了！

?????????抽奖

美化一下页面。我们可以将用户的头像展示到页面中：

完成逻辑代码：

<template>
  <div class="show">
    <div class="title">
      幸运用户
    </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>
复制代码

至此，我们的抽奖小demo就完成拉！
✌✌✌

感兴趣的同学可以关注我哦！会持续输出相关前端知识哦(●’◡’●)。如果不足，请多指教。

???互动有奖

最后，因为凳凳有幸申请到了请查收｜你有一次免费申请掘金周边礼物的机会活动的名额，如果评论区超过 10 人互动，截止9月12日中午12点，我将在评论区随机抽取一位幸运用户，赠送掘金新版徽章 2 枚（不需要承担运费哦）?！
划重点?
所有看到该文章的童鞋都可以在评论区发表评论哦！
赶快行动起来吧！???

为保证公正公平，待到9月12截止后，我会将所有在评论区留言的同学名单放入到抽奖程序中，展示抽取幸运用户的视频上传至此。

文章版权归作者所有，未经允许请勿转载。

THE END

代码人生