js实现抽奖

九宫格随机抽奖功能实现：在选择的时候方格的轮转速度先慢后快再慢的效果

奖品抽中概率根据产品数量而定；

增加权限控制功能，通过window全局变量controlRes控制抽奖结果；

代码如下：

 <div class="container">

<div class="block1 block">小米笔记本</div>

      <div class="block2 block">iPhoneX</div>

      <div class="block3 block">PS4游戏机</div>

      <div class="block8 block">谢谢参与</div>

      <div class="start block">开始抽奖</div>

      <div class="block4 block">索尼电视机</div>

      <div class="block7 block">西门子冰箱</div>

      <div class="block6 block">老板抽油烟机</div>

      <div class="block5 block">空气净化机</div>

　　　　<select name="" id="selectPrize">

        <option value="0">小米笔记本</option>

        <option value="1">iPhoneX</option>

        <option value="2">PS4游戏机</option>

        <option value="3">索尼电视机</option>

        <option value="4">空气净化机</option>

        <option value="5">老板抽油烟机</option>

        <option value="6">西门子冰箱</option>

        <option value="7">谢谢参与</option>

      </select>

    </div>

<style>
        .container {
             600px;
            height: 600px;
            border: 1px solid;
            display: flex;
            flex-wrap: wrap;
            margin: 100px auto;
        }

        .block {
             33.33%;
            height: 33.33%;
            outline: 1px solid black;
            text-align: center;
            line-height: 200px;
            font-size: 26px;
        }

        .start {
            background-color: skyblue;
            cursor: pointer;
        }
    </style>

<script>
      let blocks = $(".block");
      // 数组存放的是盒子的下标，按照顺时针的顺序
      let arr = Array.apply(null, { length: 8 }).map((it, idx) => idx + 1),
        i = 0,
        count = 0,
        stopTimer;
      function random(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
      }


      // 产品数量数组
      let products = [10, 1000, 10, 10, 10, 10, 10, 10];
      let sum = products.reduce((a, b) => a + b);




      // let rand = random(50, 58); // 给出一个停止计时器的随机数 count的值等于这个随机数时停止计时器
      let selectPrize = 0;
      $("#selectPrize").change(() => {
        selectPrize = $("#selectPrize option:selected").val();
      });
      let around = function() {
        // 将其他盒子都变为白色
        $(".block:not(.start)").css("background", "#fff");
        // 将当前arr[i]值所对应的盒子修改为粉色
        $(".block" + ++i).css("background", "pink");




        count++; // count是一个计数器 根据count的值来调整速度
        // 下面的4个if根据count的值来关闭计时器和重启计时器 改变计时器的时间间隔,设置有三个速度档
        if (count === 5 || count === 45) {
          clearInterval(stopTimer);
          stopTimer = setInterval(around, 200);
        }
        if (count === 10 || count === 35) {
          clearInterval(stopTimer);
          stopTimer = setInterval(around, 100);
        }
        if (count === 15) {
          clearInterval(stopTimer);
          stopTimer = setInterval(around, 50);
        }




        // 根据该产品的数量返回对应的数值
        function num() {
          let sel;
          // 生成一个总产品数量的随机数，根据随机数所在区间，给抽中项赋值
          products.forEach((item, index) => {
            let s = index && products.slice(0, index).reduce((a, b) => a + b);
            let l = products.slice(0, index + 1).reduce((a, b) => a + b);
            // console.log(s,l)
            if (s < window.r && window.r < l) {
              sel = 49 + index;
            }
          });
          console.log(sel);
          return sel;
        }




        // 当等于上面的随机数时，停止计时器
        // 通过全局变量controlRes来判断是否有控制抽奖结果的权限
        let compare = window.controlRes ? (+selectPrize+49) : num()
        if (count === compare) {
          clearInterval(stopTimer);
          console.log("抽中" + $(".block" + i).text());
          count = i;
          console.log(i)
          // i = 0;
          // rand = compare;
          $(".start").click(start);
        }
        // 重制i的值
        if (i === arr.length) {
          i = 0;
        }
      };
      // 给开始按钮绑定点击事件 点击后执行 around
      let start = function() {
        window.r = random(0, sum);
        $(".start").off("click"); // 当用户点击了开始按钮后 必须要移除该事件 防止用户重复点击
        stopTimer = setInterval(around, 300);
      };
      $(".start").click(start);
    </script>

实现图：