圆形抽奖转盘

最新推荐文章于 2023-04-30 21:40:25 发布

原创

最新推荐文章于 2023-04-30 21:40:25 发布 · 677 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #动画

在这里插入图片描述

<template>
  <div id="bg">
    <img
      ref="turntable"
      class="turntable"
      src="../../static/images/icon_turntable.png"
    />
    <img
      @click="go"
      ref="pointer"
      class="pointer"
      src="../../static/images/icon_pointer.png"
    />
  </div>
</template>

<script>
export default {
   
   
  data() {
   
   
    return {
   
   
      isGo: false, //是否正在执行动画
      oTurntable: "", //执行动画的对象
      randomDeg: 0, //即将旋转的度数
      lastDeg: 0, //上一次旋转的度数
      goTimes: 10, //抽奖次数
    };
  },
  methods: {
   
   
    go() {
   
   
      if (!this.isGo && this.goTimes > 0) {
   
   
        this.getNumber();
      } else if