前端如何实现一个转盘抽奖活动

在产品推广阶段，运营小姐姐会有各种各样的推广曝光产品的需求，其中就包括通过抽奖活动实现产品的引流。本文主要讲解如何通过前端开发技术实现一个转盘抽奖活动，根据后台指定的奖品使抽奖转盘中的指针最终停留在对应的区域

实现效果图

实现原理

运用了 CSS3 的 rotate 动画效果，由后端返回奖品id，前端转动转盘并使指针最终指向对应的奖品区域，形成随机抽奖的视觉效果。

实现代码

html

  <img
    src="../../assets/img/funnyActivity/round_bg.png"
    alt="圆盘"
    class="round-bg"
  />
  <img
    src="../../assets/img/funnyActivity/turntable_img.png"
    alt="转盘"
    class="turntable-img"
  />
  <img
    src="../../assets/img/funnyActivity/pointer_img.png"
    alt="指针"
    class="pointer-img"
    @click="poniterClick"
    :class="[offOn ? '' : 'disabled-click']"
  />

css

.round-bg {
  position: absolute;
  width: 86%;
  top: 385px;
  transform: translate(-50%, 0);
}
.turntable-img {
  position: absolute;
  width: calc(86% - 106px);
  top: 438px;
  left: calc(7% + 53px);
  transition: all 4s;
}
.pointer-img {
  position: absolute;
  width: 26%;
  top: 610px;
  transform: translate(-50%, 0);
  cursor: pointer;
}
.disabled-click {
  pointer-events: none;
}

js

// 指针初始化指向位置角度
// diff: 0,
// rdm: 1800,
// 抽奖转盘是否可点击
// offOn: true,
// 抽奖id对应转盘角度
// prizeData: [
//    { prizeId: '1', prizeName: 'a', deg: 337.5 },
//    { prizeId: '2', prizeName: 'b', deg: 112.5 },
//    { prizeId: '3', prizeName: 'c', deg: 247.5 },
//    { prizeId: '4', prizeName: 'd', deg: 67.5 },
//    { prizeId: '5', prizeName: 'e', deg: 292.5 },
//    { prizeId: '6', prizeName: 'f', deg: 157.5 },
//    { prizeId: '7', prizeName: '未中奖', deg: 22.5 },
//    { prizeId: '8', prizeName: '未中奖', deg: 202.5 },
// ],

// 转盘旋转函数
// deg 转盘转动角度
// prizeId 由后端接口返回的奖品id，在 prizeData 数组中映射得出奖品名称与奖品所对应的转盘角度
// prizeName 奖品名称，由 prizeData 中映射得出
// msg 文本信息，在产品需求中用户抽奖后获奖或未获奖均有弹窗信息展示，此 msg 即为后端返回的展示信息
ratating(deg, prizeId, prizeName, msg) {
  return new Promise((resolve, reject) => {
    // timer计时器
    let timer = null
    // 盛放奖品的里边转盘div
    let inBox = document.querySelector('.turntable-img')
    let _this = this
    // rdm初始的角度，默认1800，旋转5圈，deg是对应奖品的角度（转盘旋转完5圈后再次转多少°能转到对应的奖品），diff是如果连续可以抽多次，那么抽完一次后转盘指针距离一个整圈还差多少度，第二次点击抽奖让指针不用重置，从当前位置继续旋转，第一次旋转初始值为0
    this.rdm = this.rdm + Number(deg) + this.diff
    // 控制抽奖按钮是否可以点击，转盘旋转结束后可以再次点击
    _this.offOn = false
    clearInterval(timer)
    // 旋转时长，这里倒计时的时长和css设置的时长对应(transition: all 4s;)
    timer = setInterval(function() {
      inBox.style.transform = 'rotate(' + _this.rdm + 'deg)'
      clearInterval(timer)
      setTimeout(function() {
        if (_this.luckNum > 0) {
          _this.diff = 360 - deg
          _this.rdm += 1800
        }
        _this.diff = 360 - deg
        _this.rdm += 1800
        // 控制抽奖按钮是否可以点击，转盘旋转结束后可以再次点击
        _this.offOn = true
        resolve({ prizeId, prizeName, msg })
      }, 4000)
    }, 20)
  })
}