JS 转盘抽奖效果

阅读原文,微信扫描二维码，手机关注公共号酒酒酒酒，搜索 JS 转盘抽奖效果
效果图

前置条件：
开发环境：windows
开发框架：js
编辑器：HbuilderX
正文开始
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="author" content="熊仔其人">
    <title>转盘抽奖效果</title>
    <!-- 这里是css部分 -->
    <style>
        *{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .outher,.wapper{
      position: relative;
      width: 300px;
      height: 300px;
      background-color: red;
      border-radius: 50%;
      overflow: hidden;
    }
    .wapper{
      transform: rotate(22.5deg);
    }
    .left,.right{
      width: 150px;
      height: 100%;
      overflow: hidden;
      position: absolute;
    }
    .left div,.right div{
      position: absolute;
      width: 150px;
      height: 100%;
      
    }
    .left div{
      transform-origin:right center;
    }
    .right div{
      transform-origin:left center;
    }
    
    .left{
      left: 0;
      background-color: burlywood;
    }
    .right{
      right: 0;
      background-color: blue;
    }
    .left div.one{
      background-color: #fc7c78;
    }
    .left div.two{
      background-color: #f59462;
      transform: rotate(-45deg);
    }
    .left div.three{
      background-color: #fc7c78;
      transform: rotate(-90deg);
    }
    .left div.four{
      background-color: #f59462;
      transform: rotate(-135deg);
    }
    
    .right div.one{
      background-color: #f59462
    }
    .right div.two{
      background-color: #fc7c78;
      transform: rotate(45deg);
    }
    .right div.three{
      background-color: #f59462;
      transform: rotate(90deg);
    }
    .right div.four{
      background-color: #ffffff;
      transform: rotate(135deg);
    }
    
    .left .text{
      position: absolute;
      left: 50%;
      top:30px;
      transform: rotate(-30deg);
    }
    .right .text{
      position: absolute;
      left: 12%;
      top:30px;
      transform: rotate(30deg);
    }
    .circle{
      position: absolute;
      width: 90px;
      height: 90px;
      background-color: orange;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      border-radius: 50%;
      text-align: center;
      line-height: 90px;
      font-size: 30px;
      font-weight: bold;  
      cursor: pointer;
      user-select: none;
    }
    .circle::after{
      content: '';
      position: absolute;
      top: -78px;
      left: 50px;
      transform: translate(-50%);
      border: 40px solid orange;
      border-left-width: 10px;
      border-right-width: 10px;
      border-left-color: transparent;
      border-top-color: transparent;
      border-right-color: transparent;
      
    }
</style>
</head>
<body>
    <!-- 这里是HTML结构部分 -->
    <div class="outher">
    <div class="wapper">
      <div class="left">
        <div class="one">
          <span class="text">1号大奖</span>
        </div>
        <div class="two">
          <span class="text">2号大奖</span>
        </div>
        <div class="three">
          <span class="text">3号大奖</span>
        </div>
        <div class="four">
          <span class="text">4号大奖</span>
        </div>
      </div>
      <div class="right">
        <div class="one">
          <span class="text">5号大奖</span>
        </div>
        <div class="two">
          <span class="text">6号大奖</span>
        </div>
        <div class="three">
          <span class="text">7号大奖</span>
        </div>
        <div class="four">
          <span class="text">未中奖</span>
        </div>
      </div>
    </div>
    <div class="circle">
      抽奖
    </div>
  </div>
    <!-- 这里是js部分 -->
    <script>
    let wapper = document.querySelector(".wapper");
    let textAll=document.querySelectorAll(".text");
    let texts=["x1号大奖","x2号大奖","x3号大奖","x4号大奖","x5号大奖","x6号大奖","x7号大奖","未中奖"];
    // 是否抽奖中
    let isFlag=true;
   
    /*
    中奖概率比重设置,最后一个数值越大,中奖概率越小
    */
    let weight = [1,5,10,15,22,30,40,200];
    // 循环得到奖项容器,给里面赋值奖项内容
    for(let i=0;i<textAll.length;i++){
      textAll[i].innerHTML=texts[i];
    }
    // 点击抽奖指针
    document.querySelector(".circle").onclick=function(){
      if(isFlag){
        // 生成0~200的随机数,随机抽奖;生成的随机数越大,中奖概率越小  
        let random=parseInt(Math.random()*(weight[weight.length-1]));
        /*
         将生成的随机数合并到数组中，生成新的数组randomWeight 
        */
        let randomWeight=weight.concat(random);

        /*
         将数组从小到大排序。此时生成的随机数将被排序到前面 
         生成的随机数小于weight数组中最后一个数字的会被放在前面
        */
        let aa=randomWeight.sort(function(a,b){return a - b});
        // 在新数组里面查找生成的随机数下标
        let randomIndex = aa.indexOf(random);
        // 找到随机数的下标，并且根据随机数的下标取到texts的奖项内容
        switch(randomIndex){
          case 0:
            run(22.5,texts[randomIndex]); 
            break;
          case 1:
            run(66.5,texts[randomIndex]); 
            break;
          case 2:
            run(112.5,texts[randomIndex]); 
            break;
          case 3:
            run(157.5,texts[randomIndex]); 
            break;
          case 4:
            run(338.5,texts[randomIndex]); 
            break;
          case 5:
            run(294.5,texts[randomIndex]); 
            break;
          case 6:
            run(247.5,texts[randomIndex]); 
            break;
          case 7:
            run(201.5,texts[randomIndex]);
            break;
        }
      }
    }
    let timer=null;
    function run(angle,text){
      isFlag=false;
      // 转动的最终圈数
      let begin=0;
      // 最小转动圈数
      let basic=1400;
      timer=setInterval(function(){
        /* 
         转盘转动的圈数
         此处乘以0.1 可以让转动的速度逐渐缓慢
        */
        begin+=Math.ceil((basic+angle-begin)*0.1);
        
        if(begin>(basic+angle)){
          isFlag=true;
          clearInterval(timer);
          
        }


        // 设置转盘旋转圈数
        wapper.style.transform="rotate("+begin+"deg)";
        // 生成旋转圈数,可以让转盘缓慢停止;
        
      },50);
    }
</script>
</body>
</html>