js抽奖轮盘抽奖轮盘在小程序,h5中是常见的需求，这个demo将实现一个简单的抽奖轮盘，效果如下,抽奖轮盘在小程序,h5

抽奖轮盘在小程序,h5中是常见的需求，这个demo将实现一个简单的抽奖轮盘，效果如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        width: 340px;
        height: 340px;
        border: 1px #00ffff solid;
        position: relative;
        margin: 100px;
      }

      .box div {
        width: 100px;
        height: 100px;
        background-color: royalblue;
        text-align: center;
        line-height: 100px;
      }

      .div2 {
        position: absolute;
        top: 10px;
        left: 10px;
      }

      .div3 {
        position: absolute;
        top: 10px;
        left: 120px;
      }

      .div4 {
        position: absolute;
        top: 10px;
        left: 230px;
      }

      .div5 {
        position: absolute;
        top: 120px;
        left: 230px;
      }

      .div6 {
        position: absolute;
        top: 230px;
        left: 230px;
      }

      .div7 {
        position: absolute;
        top: 230px;
        left: 120px;
      }

      .div8 {
        position: absolute;
        top: 230px;
        left: 10px;
      }

      .div9 {
        position: absolute;
        top: 120px;
        left: 10px;
      }

      .button {
        width: 100px;
        height: 100px;
        background-color: #62c6a3;
        position: absolute;
        text-align: center;
        line-height: 100px;
        top: 120px;
        left: 120px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="div2">短裙</div>
      <div class="div3">口红</div>
      <div class="div4">草莓</div>
      <div class="div5">西瓜</div>
      <div class="div6">奶茶</div>
      <div class="div7">美甲</div>
      <div class="div8">谢谢参与</div>
      <div class="div9">苹果13</div>
      <strong class="button">点击抽奖</strong>
    </div>
    <script>
      // 抽奖按钮
      let button = document.getElementsByClassName('button')[0]
      // 父盒子
      let box = document.getElementsByClassName('box')[0]
      // 子项
      let pirze = box.getElementsByTagName('div')
      console.log(pirze)
      // 当前激活项
      let k = 0
      // 定时器计时时间
      let time = 500
      // 第几圈
      let count = 0
      // 定时器标识
      let int
      // 随机激活索引
      let rom = 0
      button.onclick = eve
      // 抽奖按钮的回调
      function eve() {
        pirze[k].style.background = 'pink'
        int = setInterval(pu, time)
        // Math.floor(Math.random() * 8) 这个表达式确实会随机生成一个1到8（包括1但不包括8）之间的整数。
        rom = Math.floor(Math.random() * pirze.length)
        button.onclick = null
      }
      function pu() {
        // 当激活项小于8的时候
        if (k < pirze.length - 1) {
          k++
          pirze[k - 1].style.background = 'royalblue'
          pirze[k].style.background = 'pink'
        } else {
          // 当第一圈转完的时候
          k = 0
          count++
          console.log('第几圈')
          pirze[pirze.length - 1].style.background = 'royalblue'
          pirze[k].style.background = 'pink'
        }
        // 前五圈  每圈减少20，最多减到time === 100
        if (count <= 5) {
          if (time <= 100) {
            time = 100
          } else {
            time -= 20
          }
          // 最后三圈速度变慢
        } else {
          if (time >= 500) {
            time = 500
          } else {
            time += 20
          }
        }
        // 最后一圈
        if (count > 7 && rom == k) {
          clearInterval(int)
          count = 0
          rom = 0
          time = 500
          button.onclick = eve
          let text = pirze[k].innerHTML
          setTimeout(function () {
            alert('恭喜您获得：' + text)
          }, 300)
        } else {
          clearInterval(int)
          int = setInterval(pu, time)
        }
      }
    </script>
  </body>
</html>