Vue3 实现随机抽奖（分类、概率控制）

假设我今天对于吃正餐还是小吃很纠结，始终确定不下来😣😣。然后又不是很想花太多钱吃一顿饭😌😌。于是我就做了下面这个和抽奖一样的东西，抽到啥吃啥😅😅。因为价钱的原因。正餐我给的probability是20，小吃是80。 我是这样认为的。比如一个盒子里面有100张纸。20纸上面写着我的正餐，剩下的都是小吃，那我抽中的概率就是20%🌟🌟🌟🌟。实现的思路如下。

100张纸的实现代码如下 👇 👇 👇 👇逻辑很简单，概率加起来等于100，把20的概率循环20次放入盒子里面，接着80的概率循环80次放入盒子里面。

// 首先将概率值分别存入数组中 20% 就是100个里面有20个
let probabilityArray: { name:string, index: number}[] = []
state.prize.forEach((item: Prize, i: number) => {
  for (let index = 0; index < item.probability; index++) {
    probabilityArray.push({
      name: item.name,
      index: i
    })
  }
})

完整的代码 👇 👇 👇 👇

代码里面我做了一个延迟输出的效果，越到后面时间越长，为了达到一个缓慢结束的效果，我没有做任何样式，需要的效果可以增加一些酷炫的样式，比如一张张纸滚动起来，那效果就更明显了。

代码中还用到了一个~~的运算符。对于数字来说，它就是一个取整的效果。不是四舍五入。比如4.1和4.8它都会取整数4作为输入结果。

<template>
   <div class="ts-prize">
    <div>
      <span>当前抽取的奖励:</span>
      <span>{{ finalName || '请点击开始抽取!' }}</span>
    </div>
     <el-button @click="startExtraction" type="primary" size="large">开始抽取</el-button>
  </div>
</template>

<script lang='ts'>

type Prize = {
  name: string
  probability: number
  list: string[]
}

export default defineComponent({
  setup() {
    // prize 目前的分类
    const state = reactive({
      prize: [
        {
          name: '正餐',
          probability: 20, // 概率就是20%
          list: [
            '太小食堂',
            '飞扬铁板烧',
            '泰爽·金',
            '太食獣茶餐厅',
            '添發冰厅',
            '友丁烧锅',
            '空之介寿喜烧',
            '椰凰·椰子鸡',
          ]
        },
        // 随便吃点 概率就是80%
        {
          name: '随便吃点',
          probability: 80,
          list: [
            '青椒巷·脑花面',
            '和府捞面',
            '味千拉面',
            '云婆婆·盐津燃面',
            '西贝筱面村',
            '袁记云饺',
            '王氏现捞',
            '庙东排骨',
          ]
        }
      ] as Prize[],
      finalName: '' as string // 抽到的名字
    })

    const startExtraction = () => {
      // 首先将概率值分别存入数组中 20% 就是100个里面有20个
      let probabilityArray: { name:string, index: number}[] = []
      state.prize.forEach((item: Prize, i: number) => {
        for (let index = 0; index < item.probability; index++) {
          probabilityArray.push({
            name: item.name,
            index: i
          })
        }
      })
      // 抽出大类
      const parent = probabilityArray[~~(Math.random() * probabilityArray.length)].index
      for (let i = 0; i <= 50; i++) {
        // 循环50次 并且每一次都不断的增加一个延迟 然后末尾有一个缓慢出现的效果
        (function (delay) {
          setTimeout(() => {
            let random:number = Math.ceil(Math.random() * (state.prize[parent].list.length - 1));
            if (delay == 50) {
              state.finalName = state.prize[parent].list[random]
            } else {
              state.finalName = state.prize[parent].list[random]
            }
          }, (150 + i) * i);
        })(i)
      }
    }

    return {
      ...toRefs(state),
      startExtraction,
    }
  }
})
</script>

<style lang="scss" scoped>
.ts-prize {
  width: 100%;
  height: 100%;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  > * {
    margin-bottom: 10px;
  }
  div {
    width: 300px;
    text-align: center;
    display: flex;
    justify-content: space-between;
  }
  .el-button {
    width: 300px;
    font-size: 18px;
    letter-spacing: 16px;
    cursor: pointer
  }
}

</style>

我是Etc.End。如果文章对你有所帮助，能否帮我点个免费的赞和收藏😍。

👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇