vue实现简单转盘抽奖功能

<template>
  <div class="home">
    <button @click="start">开始</button>
    <div
      class="grid"
      v-for="(item, i) in arr"
      :key="i"
      :class="[bg == i + 1 ? 'active' : null]"
    ></div>
  </div>
</template>

<script>

export default {
  name: "Home",
  data() {
    return {
      // 标记转动的位置
      bg: 1,
      // 循环的奖品数组
      arr: [1, 2, 3, 4, 5],
      // 是否正在转动的标记
      isSport: false,
      // 转动速度减慢
      reduce: 10,
      // 转动间隔时间
      startTime: 30,
      area:''
    };
  },
  methods: {
    start() {
      if (this.isSport == false) {
        this.isSport = true;
      } else {
        // 正在转动时点击按钮无效
        return;
      }
      // 模拟的设定转动的位置
      this.area= parseInt(Math.random()*4+1);
      this.go();
    },
    go() {
      setTimeout(() => {
        // 让转动速度减慢
        this.startTime = this.startTime + this.reduce;
        this.bg = (this.bg % 5) + 1;//这个%时求余的意识哦
        // 如果达到这个条件则停止跳动
        if (this.startTime >= 300 && this.bg == this.area) {
          // 标记是否转动状态
          this.isSport = false;
          // 重置转动间隔时间
          this.startTime = 30;
          return;
        }
        this.go();
      }, this.startTime);
    },
  },
};
</script>
<style scoped>
.grid {
  width: 50px;
  height: 50px;
  background: red;
  margin: 10px;
}
.active {
  background: blue;
}
</style>