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 {
            width: 600px;
            height: 600px;
            border: 1px solid;
            display: flex;
            flex-wrap: wrap;
            margin: 100px auto;
        }

        .block {
            width: 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> 
   
 

实现图：