In the stage of product promotion, little sister operators will have a variety of needs to promote and expose products, including the drainage of products through lottery activities. This paper mainly explains how to achieve a turntable lottery through the front-end development technology, according to the backstage designated prize so that the pointer in the lottery turntable finally stay in the corresponding area

Realize the effect drawing

Realize the principle of

The rotate animation effect of CSS3 is used to return the prize ID from the back end, and the front end rotates the wheel and makes the pointer point to the corresponding prize area, forming a visual effect of random lottery.

The implementation code

html

  <img
    src=".. /.. /assets/img/funnyActivity/round_bg.png"
    alt="Disc"
    class="round-bg"
  />
  <img
    src=".. /.. /assets/img/funnyActivity/turntable_img.png"
    alt="Wheel"
    class="turntable-img"
  />
  <img
    src=".. /.. /assets/img/funnyActivity/pointer_img.png"
    alt="Pointer"
    class="pointer-img"
    @click="poniterClick"
    :class="[offOn ? '' : 'disabled-click']"
  />
Copy the code

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;
}
Copy the code

js

// The pointer initializes the pointing position Angle
// diff: 0,
// rdm: 1800,
// Whether the lottery wheel is clickable
// offOn: true,
// The lottery id corresponds to the rotation Angle
// 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: 'not winning ', deg: 22.5},
/ / {prizeId: '8', prizeName: 'not winning, deg, 202.5}.
/ /,

// Dial rotation function
// deg rotation Angle
// prizeId indicates the prizeId returned by the back end interface, which is mapped to the prizeData array to get the prize name and the rotation Angle corresponding to the prize
// prizeName the prizeName, which is mapped from prizeData
// MSG text message. In product requirements, popup window information will be displayed if the user wins or does not win the prize after lottery. This MSG is the display information returned by the backend
ratating(deg, prizeId, prizeName, msg) {
  return new Promise((resolve, reject) = > {
    // timer Indicates the timer
    let timer = null
    // Inside the div that holds the prize
    let inBox = document.querySelector('.turntable-img')
    let _this = this
    / / RDM initial point of view, by default, 1800, 5 turns deg is the Angle of the corresponding prize (rotate after five laps to turn ° can turn again to the corresponding prize), if the diff is the continual can smoking for many times, then after finished a turntable pointer from a whole circle still bad, the number of the second click draw let pointer need not reset, Continue rotation from the current position with the first rotation starting at 0
    this.rdm = this.rdm + Number(deg) + this.diff
    // Control whether the lucky draw button can be clicked, and click again after the rotation of the wheel
    _this.offOn = false
    clearInterval(timer)
    // 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
        // Control whether the lucky draw button can be clicked, and click again after the rotation of the wheel
        _this.offOn = true
        resolve({ prizeId, prizeName, msg })
      }, 4000)},20)})}Copy the code