超级大转盘！（结尾附代码）

网上看到有人用转盘抽奖，怀疑是不是有问题，为什么每次都中不了，能不能整个转盘自己想中啥中啥，查阅了网上写得好的文章，果然实现了只中谢谢参与！！
先上效果：

不是哥们，这还能只中谢谢参与？(其实故意干的)

这段代码用html+less+js和简单的jq判断实现

HTML部分

<section
  class="section"
  style="background-color: #1C003B;height: calc(100vh - 2.24rem);"
>
  <div class="kuohu"></div>
  <div class="luckBg">
    <div class="luckWhellBg">
      <div class="luckWhellBgMain rotateStyle"></div>
      <div class="wheel-main">
        <div class="prize-list rotateStyle"></div>
        <div class="prize_point" onclick="prizeRoll()"></div>
      </div>
    </div>
  </div>
  <p class="jihui">您今天还有<span>1</span>次抽奖机会!</p>
</section>

旋转动画的话其实就是.rotateStyle中的 transform 属性，改变转盘旋转的速度以及动画结束时间

CSS

/* 大转盘 */
.luckBg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* background: #180036; */
  background-image: url(../images/borderrd.png);
  width: 6.5rem;
  height: 6.5rem;
  background-size: contain;
  /* border-radius: 50%; */
  margin: 0 auto;
  padding: 0.5rem;
  box-sizing: border-box;
  .luckWhellBg,
  .luckWhellBgMain {
    background: pink;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;

    .rotateStyle {
      -webkit-transition: transform 5000ms ease-in-out;
      transition: transform 5000ms ease-in-out;
    }
  }
}
.kuohu {
  width: 100%;
  height: 5.34rem;
  background-image: url(../images/kuohu.png);
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.luckWhellSector {
  position: absolute;
  top: 0;
  right: 0;
  transform-origin: 0% 100%;
  border: 1px solid #facd89;
  border-right: 0;
  border-top: 0;
  box-sizing: border-box;
}

.luckWhellSector {
  &:nth-child(1) {
    position: absolute;
    background: #fff68b;
  }
  &:nth-child(4) {
    position: absolute;
    background: #fff68b;
  }
  &:nth-child(2) {
    position: absolute;
    background: #ffbc2c;
  }
  &:nth-child(5) {
    position: absolute;
    background: #ffbc2c;
  }
  &:nth-child(3) {
    position: absolute;
    background: #ffd428;
  }
  &:nth-child(6) {
    position: absolute;
    background: #ffd428;
  }
}

/* .luckWhellSector:nth-child(2n+1) {
  position: absolute;
  background: #72FCF9;
} */

.wheel-main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.prize-list {
  width: 100%;
  height: 100%;
  position: relative;
}

.prize-item {
  position: absolute;
  left: 50%;
  height: 50%;
  padding-top: 15px;
  box-sizing: border-box;
  text-align: center;
  transform-origin: 50% 100%;
  color: #f83c0e;
}

.prize_point {
  position: absolute;
  left: 50%;
  // background: #ff3a60;
  width: 1.81rem;
  background-image: url(../images/btn.png);
  background-size: contain;
  height: 2.2rem;
  top: 50%;
  margin-left: -0.9rem;
  margin-top: -1rem;
  border-radius: 50%;
}

.prize_point::after {
  /*   position: absolute;
  left: 50%;
  top: -28px;
  width: 0;
  height: 0;
  margin-left: -16px;
  border: 16px solid;
  border-color: transparent transparent #ff3a60;
  content: ''; */
}

JS 部分

因为数据肯定是活的，所以我们这里要把数据单独拎出来

let formData = [
  {
    //可以随意更改奖项个数
    id: 1,
    img: "./images/33.png",
    prize_name: "谢谢参与",
  },
  {
    id: 2,
    img: "./images/22.png",
    prize_name: "打工一天",
  },
  {
    id: 3,
    img: "./images/11.png",
    prize_name: "狂炫一天",
  },
  {
    id: 4,
    img: "./images/33.png",
    prize_name: "谢谢参与",
  },
  {
    id: 5,
    img: "./images/22.png",
    prize_name: "打工一天",
  },
  {
    id: 6,
    img: "./images/11.png",
    prize_name: "狂炫一天",
  },
];

圈里的图片可以自己查找替换

const CIRCLE_ANGLE = 360; // 转盘的总旋转角度
const BIGSIZE = 24; //
let angleList = []; // 记录每个奖的位置
let gift_id = 1; //中奖ID
let prizeList = formatPrizeList(formData); //有样式的奖品列表
let index = ""; //抽中的是第几个奖品
let isRotating = false; //为了防止重复点击
let rotateAngle = 0;
let bgDom = document.getElementsByClassName("luckWhellBgMain")[0];
let divDom = document.getElementsByClassName("prize-list")[0];

定义变量

function formatPrizeList(list) {
  const l = list.length;
  // 计算单个奖项所占的角度
  const average = CIRCLE_ANGLE / l;
  const half = average / 2;
  const rightBig = l == 2 ? "50" : "0";
  const heightBig = l <= 3 ? "100" : "50";
  const topBig = l == 3 ? "-50" : "0";
  const skewMain = l <= 2 ? 0 : (-(l - 4) * 90) / l;
  // 循环计算给每个奖项添加style属性
  list.forEach((item, i) => {
    // 每个奖项旋转的位置为 当前 i * 平均值 + 平均值 / 2
    const angle = -(i * average + half);
    const bigAge = l > 2 ? (i * 360) / l : "0";
    // 增加 style 这个是给每一个奖项增加的样式
    item.style = `-webkit-transform: rotate(${-angle}deg);
          transform: rotate(${-angle}deg);
          width:${(100 / l) * 2}%;  
          margin-left: -${100 / l}%;
          font-size:${BIGSIZE - l}px;`;
    //这是给每一个转盘背景新增的样式
    item.style2 = `-webkit-transform: rotate(${bigAge}deg);
          transform: rotate(${bigAge}deg) skewY(${skewMain}deg);
          right:${rightBig * i}%;
          height:${heightBig}%;
          top:${topBig}%;
          width:${l == 1 ? 100 : 50}%;
          background:${item.color}
          `;
    // 记录每个奖项的角度范围
    angleList.push(angle);
  });
  return list;
}

把奖品放入这个函数中

prizeAddHtml(prizeList);

//奖品赋值到每个奖品中；
function prizeAddHtml(prizeList) {
  console.log(prizeList);
  //把奖品赋值到.luckWhellBgMain
  let htmlBg = "";
  let htmlDiv = "";
  for (let i = 0, len = prizeList.length; i < len; i++) {
    htmlBg += `<div class="luckWhellSector" style="${prizeList[i].style2}"></div>`;
    htmlDiv += `<div class="prize-item"  style="${prizeList[i].style}">							
          <div style="letter-spacing:0.05rem">
            ${prizeList[i].prize_name}                
          </div>	
          <div style="padding-top:5px;">
            <img src=" ${prizeList[i].img}" style="width:45%"/>
          </div>	
        </div>`;
  }
  bgDom.innerHTML = htmlBg;
  divDom.innerHTML = htmlDiv;
}

抽奖部分

//抽奖
let prize = "";
function prizeRoll() {
  if ($(".jihui span").text() == 0) {
    return alert("你的机会已经用完了！无法继续抽奖，若获奖，请到活动页面领取");
  }
  if (isRotating) return false;
  prizeList.forEach((item, i) => {
    if (item.id == gift_id) {
      index = i;
      console.log(item.prize_name);
      prize = item.prize_name;
    } //判断中奖的位置
  });
}

转盘转动角度

//转盘转动角度
function rotating() {
  isRotating = true;
  const config = {
    duration: 5000,
    circle: 8,
    mode: "ease-in-out",
  };
  // 计算角度
  const angle =
    // 初始角度
    rotateAngle +
    // 多旋转的圈数
    config.circle * CIRCLE_ANGLE +
    // 奖项的角度
    angleList[index] -
    (rotateAngle % CIRCLE_ANGLE);
  rotateAngle = angle;
  bgDom.style.transform = `rotate(${rotateAngle}deg)`;
  divDom.style.transform = `rotate(${rotateAngle}deg)`;
  // 旋转结束后，允许再次触发
  setTimeout(() => {
    isRotating = false;
    console.log("旋转结束");
    $(".jihui span").text(0);
    alert(prize);
  }, config.duration + 500);
}

完整代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖</title>
    <link rel="stylesheet/less" href="./css/style.less">
    <link rel="stylesheet" href="./css/base.css">
</head>

<body>
    <header class="header">
        <div class="banner" style="background-image: url(./images/banner.jpg);"></div>
    </header>
    <section class="section" style="background-color: #1C003B;height: calc(100vh - 2.24rem);">
        <div class="kuohu"> </div>
        <div class="luckBg">
            <div class="luckWhellBg">
                <div class="luckWhellBgMain rotateStyle">
                </div>
                <div class="wheel-main">
                    <div class="prize-list rotateStyle">
                    </div>
                    <div class="prize_point" onclick="prizeRoll()"></div>
                </div>
            </div>
        </div>
        <p class="jihui">您今天还有<span>1</span>次抽奖机会!</p>
    </section>
    <script>
        const CIRCLE_ANGLE = 360;
        const BIGSIZE = 24;
        let formData = [{ //可以随意更改奖项个数
            id: 1,
            img: './images/33.png',
            prize_name: "谢谢参与"
        }, {
            id: 2,
            img: './images/22.png',
            prize_name: "打工一天"
        }, {
            id: 3,
            img: './images/11.png',
            prize_name: "狂炫一天"
        }, {
            id: 4,
            img: './images/33.png',
            prize_name: "谢谢参与"
        }, {
            id: 5,
            img: './images/22.png',
            prize_name: "打工一天"
        }, {
            id: 6,
            img: './images/11.png',
            prize_name: "狂炫一天"
        },];
        let angleList = []; // 记录每个奖的位置
        let gift_id = 1; //中奖ID
        let prizeList = formatPrizeList(formData); //有样式的奖品列表
        let index = '';//抽中的是第几个奖品
        let isRotating = false; //为了防止重复点击
        let rotateAngle = 0;
        let bgDom = document.getElementsByClassName('luckWhellBgMain')[0];
        let divDom = document.getElementsByClassName('prize-list')[0];
        prizeAddHtml(prizeList);
        //每个奖增加style
        function formatPrizeList(list) {
            const l = list.length;
            // 计算单个奖项所占的角度
            const average = CIRCLE_ANGLE / l;
            const half = average / 2;
            const rightBig = l == 2 ? '50' : '0';
            const heightBig = l <= 3 ? '100' : '50';
            const topBig = l == 3 ? '-50' : '0';
            const skewMain = l <= 2 ? 0 : -(l - 4) * 90 / l;
            // 循环计算给每个奖项添加style属性
            list.forEach((item, i) => {
                // 每个奖项旋转的位置为 当前 i * 平均值 + 平均值 / 2
                const angle = -(i * average + half);
                const bigAge = l > 2 ? i * 360 / l : '0';
                // 增加 style 这个是给每一个奖项增加的样式
                item.style = `-webkit-transform: rotate(${-angle}deg);
          transform: rotate(${-angle}deg);
          width:${100 / l * 2}%;  
          margin-left: -${100 / l}%;
          font-size:${BIGSIZE - l}px;`;
                //这是给每一个转盘背景新增的样式
                item.style2 = `-webkit-transform: rotate(${bigAge}deg);
          transform: rotate(${bigAge}deg) skewY(${skewMain}deg);
          right:${rightBig * i}%;
          height:${heightBig}%;
          top:${topBig}%;
          width:${l == 1 ? 100 : 50}%;
          background:${item.color}
          `
                // 记录每个奖项的角度范围
                angleList.push(angle);
            });
            return list;
        };
        //奖品赋值到每个奖品中；
        function prizeAddHtml(prizeList) {
            console.log(prizeList)
            //把奖品赋值到.luckWhellBgMain
            let htmlBg = '';
            let htmlDiv = '';
            for (let i = 0, len = prizeList.length; i < len; i++) {
                htmlBg += `<div class="luckWhellSector" style="${prizeList[i].style2}"></div>`;
                htmlDiv += `<div class="prize-item"  style="${prizeList[i].style}">							
          <div style="letter-spacing:0.05rem">
            ${prizeList[i].prize_name}                
          </div>	
          <div style="padding-top:5px;">
            <img src=" ${prizeList[i].img}" style="width:45%"/>
          </div>	
        </div>`
            }
            bgDom.innerHTML = htmlBg;
            divDom.innerHTML = htmlDiv;
        };
        //抽奖
        let prize = ''
        function prizeRoll() {
            if ($('.jihui span').text() == 0) {
                return alert('你的机会已经用完了！无法继续抽奖，若获奖，请到活动页面领取')
            }
            if (isRotating) return false;
            /*      gift_id = Math.floor(1 + Math.random() * prizeList.length);
                 console.log(gift_id); */

            prizeList.forEach((item, i) => {
                if (item.id == gift_id) {
                    index = i
                    console.log(item.prize_name);
                    prize = item.prize_name
                }; //判断中奖的位置
            });
            rotating();
        };
        //转盘转动角度
        function rotating() {
            isRotating = true;
            // const {rotateAngle,angleList,config,index} = {0,angleList,{duration:5000, circle: 8,mode: "ease-in-out"},index};
            const config = {
                duration: 5000,
                circle: 8,
                mode: "ease-in-out"
            }
            // 计算角度
            const angle =
                // 初始角度
                rotateAngle +
                // 多旋转的圈数
                config.circle * CIRCLE_ANGLE +
                // 奖项的角度
                angleList[index] -
                (rotateAngle % CIRCLE_ANGLE);
            rotateAngle = angle;
            bgDom.style.transform = `rotate(${rotateAngle}deg)`
            divDom.style.transform = `rotate(${rotateAngle}deg)`
            // 旋转结束后，允许再次触发
            setTimeout(() => {
                isRotating = false;
                console.log('旋转结束')
                $('.jihui span').text(0)
                alert(prize)
            }, config.duration + 500);
        }			
    </script>
    <script src="./js/less.js"></script>
    <script src="./js/jquery.3.6.3.min.js"></script>
    <script src="./js/rem7.5.js"></script>
</body>
</html>

结尾

当然中什么可以自己根据id控制中什么（我中不了奖就是有黑幕！）