前端小转盘

最新推荐文章于 2024-07-12 16:55:56 发布

华、、

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量501

点赞数 4

分类专栏： js 前端转盘文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2201_75918981/article/details/137158179

版权

前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

转盘

1 篇文章 0 订阅

订阅专栏

直接看代码，代码中有注释：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小转盘</title>
  <link href="./style.css" type="text/css" rel="stylesheet">

  <style>
    * {
      margin: 0;
      padding: 0;
    }
  
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  
  
    .outher {
      width: 300px;
      height: 300px;
      position: relative;
      border-radius: 50%;
    }
  
    .wapper {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      overflow: hidden;
      background-color: black;
      transform: rotate(22.5deg);
    }
  
    .left {
      position: absolute;
      width: 150px;
      height: 300px;
      left: 0;
      overflow: hidden;
    }
  
    .left .text {
      position: absolute;
      top: 30px;
      left: 40%;
      transform: rotate(-32.5deg);
      text-align: center;
    }
  
    .right .text {
      position: absolute;
      top: 30px;
      left: 25%;
      transform: rotate(35deg);
      text-align: center;
    }
  
  
    .right {
      position: absolute;
      width: 150px;
      height: 300px;
      right: 0;
      overflow: hidden;
      text-align: center;
    }
  
  
    .left div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-origin: right center;
    }
  
    .left div.one {
      background-color: #fc8a7b;
    }
  
  
    .left div.two {
      background-color: #f5c962;
      transform: rotate(-60deg);
    }
  
    .left div.three {
      background-color: #fcf17b;
      transform: rotate(-120deg);
    }
  
  
  
    .right div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-origin: left center;
    }
  
  
    .right div.one {
      background-color: #86fc7b;
    }
  
  
    .right div.two {
      background-color: #62d8f5;
      ;
      transform: rotate(60deg);
    }
  
    .right div.three {
      background-color: #d17bfc;
      ;
      transform: rotate(120deg);
    }
  
  
    .circle {
      width: 100px;
      height: 100px;
      background-color: #f2552e;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
      font-weight: bold;
      cursor: pointer;
      user-select: none;
    }
  
    .circle:after {
      width: 0;
      height: 0;
      border: 40px solid #f2552e;
      ;
      border-left-width: 10px;
      border-right-width: 10px;
      position: absolute;
      content: "";
      border-left-color: transparent;
      border-top-color: transparent;
      border-right-color: transparent;
      top: -70px;
      left: calc(50% - 10px);
      z-index: -1;
    }
  </style>
</head>


<body>

  <div class="outher">
    <div class="wapper">
      <div class="left">
        <!-- 转盘分为六份，一边3份 -->
        <div class="one"> <span class="text"></span></div>
        <div class="two"> <span class="text"></span></div>
        <div class="three"> <span class="text"></span></div>
      </div>
      <div class="right">
        <div class="one"> <span class="text"></span></div>
        <div class="two"> <span class="text"></span></div>
        <div class="three"> <span class="text"></span></div>
      </div>

    </div>

    <div class="circle">
      抽奖
    </div>
  </div>

  <script>
    let wapper = document.querySelector(".wapper");

    let textAll = document.querySelectorAll(".wapper .text");

      
    let prize = ["6块红包", "8块红包", "12块红包", "16块红包", "18块红包", "20块红包"]; // 这里是奖品的的名字

      
    let prizeWeight = [5, 10, 15, 20, 25, 30];  // 该数组控制中奖概率,比如第一个中奖概率是5份/30份，第二个是（10-5）份/30份

      
    let weightSum = prizeWeight.reduce(function (prevValue, curVal) { //  中奖总份额，三十份
        return prevValue + curVal;
    });

    for (let i = 0; i < textAll.length; i++) {
      textAll[i].innerHTML = prize[i];
    }

    let isFlag = true;

    document.querySelector(".circle").onclick = function () {
      if (isFlag) {

        let weightRandom = parseInt(Math.random() * 30);  //生成中奖数字，看落在0-30的哪一个区间
        
        let concatAfterArr = prizeWeight.concat(weightRandom);  // 合并
        
        let sortedWeightArr = concatAfterArr.sort(function (a, b) { return a - b });  //升序排序

        
        var randomIndex = sortedWeightArr.indexOf(weightRandom);  // 随机生成奖品索引号，范围是【1,7】
        randomIndex = Math.min(randomIndex, prize.length - 1);

        if(!localStorage.getItem('uname')){ //此处可以进行作弊，设置第一次转盘的中奖奖品
          localStorage.setItem('uname', 'handsome')
          run(142, 3);
          setTimeout(function(){
            alert(`奖品12块，仅本次有效，正在打包奖品中···`)
          },6500) //6.5秒后转盘停止，alert弹出中奖信息
          return
        }

        let text = prize[randomIndex];

        switch (randomIndex) {
          case 0:
            run(31, text);
            setTimeout(function () {
              alert(`奖品6块`)
            }, 6500)
            break;
          case 1:
            run(63, text);
            setTimeout(function () {
              alert(`奖品8块`)
            }, 6500)
            break;
          case 2:
            run(142, text);
            setTimeout(function () {
              alert(`奖品12块`)
            }, 6500)
            break;
          case 3:
            run(200, text);
            setTimeout(function () {
              alert(`奖品20块`)
            }, 6500)
            break;
          case 4:
            run(295, text);
            setTimeout(function () {
              alert(`奖品18块`)
            }, 6500)
            break;
          case 5:
            run(351, text);
            setTimeout(function () {
              alert(`奖品16块`)
            }, 6500)
            break;
        }
      }

    };

    function run(angle, text) {
      isFlag = false;
      let begin = 0;
      let timer = null;
      let basic = 1800;
      timer = setInterval(function () {
        if (begin > (basic + angle)) {
          isFlag = true;
          clearInterval(timer);
        }
        wapper.style.transform = "rotate(" + (begin) + "deg)";
        
        begin += Math.ceil(basic + angle - begin) * 0.1;  // 此处实现转盘慢慢变慢的效果
      }, 70);
    }
    
  </script>

</body>

</html>