hello 大家好，🙎🏻♀️🙋🏻♀️🙆🏻♀️
我是一个热爱知识传递，正在学习写作的作者，ClyingDeng 凳凳！
带大家手撸一个抽奖程序！
评论有奖！评论有奖！评论有奖！重要的事情说三遍！
🙆♀️让随机数跑起来
首先，想让随机数跑起来，得先有个随机数啊！ 我们先将抽奖的人数名字信息放到一个数组中，再生成一个数组长度以内的随机数数字。
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截止后，我会将所有在评论区留言的同学名单放入到抽奖程序中，展示抽取幸运用户的视频上传至此。
🎊🎊🎊开奖拉
总结拉：参与评论且有效的一共55位童鞋哦。
由于需要转动画，凳凳尽量控制在10s左右的哦！一次抽取完成！
恭喜幸运用户：世界太精彩!🎉🎉🎉
