原生js 实现抽奖功能

html标签代码

   <div class="wrapper">
      <div class="pan"><img src="/img/pan.png" alt="" /></div>
      <div class="btn"><img src="/img/btn.png" alt="" /></div>
   </div>

样式代码

    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .wrapper {
        width: 400px;
        height: 400px;
        margin: 0 auto;
        margin-top: 100px;
        position: relative;
      }
      .wrapper .pan {
        width: 400px;
        height: 400px;
        position: absolute;
        left: 0px;
        top: 0px;
      }
      .wrapper .pan img {
        width: 400px;
        height: 400px;
      }
      .wrapper .btn {
        width: 130px;
        height: 145px;
        position: fixed;
        z-index: 999;
        left: calc(50% - 65px);
        top: calc(50% - 131px);
      }
      .wrapper .btn img {
        width: 130px;
        height: 145px;
      }
    </style>

核心js代码

var defaultPar = {
  rotateNum: 5,
  turnbody: document.getElementsByClassName('wrapper')[0],
  clkFn: function () {},
  judeg: function () {},
}

function Lottery(pars) {
  // assign  es6 高级用法  如果pars 为空  则实用默认的defaultPar
  this.pars = Object.assign(defaultPar, pars) // 走默认  如果传参pars
  this.pars = pars
  this.bool = true
  this.init()
}

Lottery.prototype.init = function () {
  var self = this
  this.pars.btn = this.pars.turnbody.getElementsByClassName('btn')[0]
  this.pars.bigWheel = this.pars.turnbody.getElementsByClassName('pan')[0]
  this.pars.btn.onclick = function () {
    if (self.bool) {
      self.pars.clkFn()
      self.bool = false
    }
  }
  // 监听转盘是否结束 
  this.pars.bigWheel.addEventListener('webkitTransitionEnd', function () {
    self.bool = true
    self.pars.bigWheel.style.transform = 'rotate(' + self.pars.myNum + 'deg)'
    self.pars.bigWheel.style.transition = 'none'
    self.pars.judeg(self.pars.myNum) //判断角度
  })
}
// 执行旋转
Lottery.prototype.tabeRun = function (deg) {
  var myNum = deg + this.pars.rotateNum * 360
  this.pars.bigWheel.style.transform = 'rotate(' + myNum + 'deg)'
  this.pars.bigWheel.style.transition = 'all 4s'
  this.pars.myNum = deg
}

   var par = {
        rotateNum: 8,
        turnbody: document.getElementsByClassName('wrapper')[0],
        clkFn: clkFn,
        judeg: judeg,
      }
      var pars = new Lottery(par)

      function clkFn() {
        var num = Math.floor(Math.random() * 360)
        console.log(num)
        pars.tabeRun(num)
      }
      
 function judeg(deg) {
        var str = ''
        if (deg > 0 && deg < 45) {
          str = '2'
          console.log('2')
        } else if ((deg > 90 && deg < 135) || (deg > 270 && deg < 315)) {
          console.log('3')
        } else if (
          (deg > 45 && deg < 90) ||
          (deg > 136 && deg < 180) ||
          (deg > 225 && deg < 270) ||
          (deg > 315 && deg < 360)
        ) {
          console.log('4')
        } else if (deg > 180 && deg < 225) {
          console.log('1')
        }
      }