一. 录制视频

6735602592950965007.MP4 (633.06KB)

二. 代码

HTML

  1. <div class="lottery-machine"></div>
  2. <div class="j-lottery-start lottery-start-btn"></div>

JS

  1. import $ from 'jquery'
  2. class Lottery {
  3.   /**
  4.    * 抽奖组件
  5.    * @param {string} - 抽奖容器
  6.    * @param {boolean} - 是否需要登录
  7.    * @param {number} - 抽奖次数
  8.    * @param {number} - 抽奖动画持续时间
  9.    * @param {array/object} - 奖品信息
  10.    */
  11.   constructor ({
  12.     lotteryEl,
  13.     isLogin = true,
  14.     prizeObjArray,
  15.     lotteryResultCallback,
  16.     minturns = 8,
  17.     lastestIndex = 0
  18.   }) {
  19.     Object.assign(this, {
  20.       lotteryEl: lotteryEl,
  21.       isLogin: isLogin,
  22.       prizeObjArray,
  23.       lotteryResultCallback: lotteryResultCallback,
  24.       // 高亮位置
  25.       lastestIndex: lastestIndex,
  26.       // 最小圈数
  27.       minturns: minturns,
  28.       // 当前进过的步数
  29.       runs_now: 0,
  30.       // 当前用户中奖情况
  31.       finalIndex: 2,
  32.       // 启动速度
  33.       speed: 300,
  34.       // 最快速度
  35.       max_speed: 40,
  36.       // 触发开始抽奖元素
  37.       lotteryStartbtnEl: '.j-lottery-start',
  38.       // 是否正在进行中
  39.       isLotteryIng: false
  40.     })
  42.     this.initLotterySkeleton()
  43.     this.lotteryFuncEvent()
  44.   }
  46.   /** 组件结构代码 非必须 */
  47.   initLotterySkeleton () {
  48.     const html = `<img src="https://img1.dxycdn.com/2019/0906/267/3366737516631409096-2.png" alt="" />
  49.     <div class="prize-roulette">
  50.       <ul>
  51.         ${this.prizeObjArray
  52.           .map((item, index) => {
  53.             return `<li class="single-prize ${
  54.               index === this.lastestIndex ? 'active' : ''
  55.             }"><div class="item">${item.label}</div></li>`
  56.           })
  57.           .join('')}
  58.       </ul>
  59.     </div>`
  60.     $(this.lotteryEl).html(html)
  61.   }
  63.   rolling () {
  64.     const self = this
  65.     // 正在进行中
  66.     self.isLotteryIng = true
  67.     // 定时器记录步数
  68.     let myInterval = setTimeout(function () {
  69.       self.rolling()
  70.     }, self.speed)
  71.     // 增加一个单位步数
  72.     self.runs_now++
  73.     // 根据获奖信息算出总共需要的步数
  74.     this.countNum = this.minturns * 4 + self.finalIndex
  75.     // 动画速度调节
  76.     if (self.runs_now <= (self.countNum / 3) * 2) {
  77.       // 上升期间
  78.       self.speed -= 30
  79.       if (self.speed <= self.max_speed) {
  80.         self.speed = self.max_speed // 最高速度为 40
  81.       }
  82.     } else if (self.runs_now >= self.countNum) {
  83.       // 抽奖结束 1. 清除定时器 2. 数据 reset 3. 结束回调
  84.       clearInterval(myInterval)
  85.       // self.runs_now = 0
  86.       self.isLotteryIng = false
  87.       self.lotteryResultCallback()
  88.     } else if (self.countNum - self.runs_now <= 10) {
  89.       // 下降期间
  90.       self.speed += 20
  91.     } else {
  92.       // 缓冲区间
  93.       self.speed += 10
  94.       if (self.speed >= 100) {
  95.         self.speed = 100 // 最低速度为 100
  96.       }
  97.     }
  98.     // 渲染当前高亮位置
  99.     self.renderActiveIndex(self.runs_now % 4)
  100.   }
  102.   lotteryFuncEvent () {
  103.     const self = this
  104.     $('body').on('click', self.lotteryStartbtnEl, function () {
  105.       if (self.isLotteryIng) return false
  106.       self.rolling()
  107.     })
  108.   }
  110.   /**
  111.    * 渲染当前高亮位置
  112.    * @param {number} - index 当前位置 0，1，2，3
  113.    */
  114.   renderActiveIndex (index) {
  115.     const prizeLi = $('.prize-roulette li')
  116.     prizeLi
  117.       .removeClass('active')
  118.       .eq(index)
  119.       .addClass('active')
  120.   }
  121. }
  123. new Lottery({
  124.   lotteryEl: '.lottery-container .lottery-content .lottery-machine',
  125.   isLogin: true,
  126.   lastestIndex: 0,
  127.   minturns: 15,
  128.   // 奖品设置
  129.   prizeObjArray: [
  130.     {
  131.       id: 1,
  132.       label: '100元 优惠券'
  133.     },
  134.     {
  135.       id: 2,
  136.       label: '200元 优惠券'
  137.     },
  138.     {
  139.       id: 3,
  140.       label: '500元 优惠券'
  141.     },
  142.     {
  143.       id: 4,
  144.       label: '再接再厉'
  145.     }
  146.   ],
  147.   lotteryResultCallback: function () {
  148.         // 抽奖结束回调函数
  149.   }
  150. })

三. 函数解析

rolling 函数的作用是调节走马灯转动时，不同时间段的速度。
this.countNum 是设定的到达该用户所得奖品的总共步数。