使用纯CSS和JavaScript来实现一个转盘抽奖效果（设置机率）

皮卡丘-杰尼龟

于 2024-10-10 19:45:00 发布

阅读量156

点赞数

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_46328739/article/details/142821561

版权

使用纯CSS和JavaScript来实现一个转盘抽奖效果。我们可以设定每个奖项的概率，并使用加权随机算法来决定最终的中奖奖项。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>转盘抽奖</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f7f7f7;
      }

      .container {
        position: relative;
        width: 300px;
        height: 300px;
      }

      /* 轮盘容器 */
      .wheel {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 5px solid #333;
        position: relative;
        overflow: hidden;
        transform: rotate(-36deg);
        transition: transform 5s ease-out;
      }

      /* 使用 clip-path 切分成10个扇形，并设置z-index */
      .wheel div {
        position: absolute;
        width: 100%;
        height: 100%;
        clip-path: polygon(50% 50%, 87% -3%, 100% 33%);
        transform-origin: 50% 50%;
        z-index: 1;
      }

      /* 设置每个扇形区域的颜色和旋转角度 */
      .wheel div:nth-child(1) {
        background-color: #f39c12;
        transform: rotate(0deg);
      }
      .wheel div:nth-child(2) {
        background-color: #e74c3c;
        transform: rotate(36deg);
      }
      .wheel div:nth-child(3) {
        background-color: #8e44ad;
        transform: rotate(72deg);
      }
      .wheel div:nth-child(4) {
        background-color: #3498db;
        transform: rotate(108deg);
      }
      .wheel div:nth-child(5) {
        background-color: #1abc9c;
        transform: rotate(144deg);
      }
      .wheel div:nth-child(6) {
        background-color: #27ae60;
        transform: rotate(180deg);
      }
      .wheel div:nth-child(7) {
        background-color: #f1c40f;
        transform: rotate(216deg);
      }
      .wheel div:nth-child(8) {
        background-color: #2ecc71;
        transform: rotate(252deg);
      }
      .wheel div:nth-child(9) {
        background-color: #e67e22;
        transform: rotate(288deg);
      }
      .wheel div:nth-child(10) {
        background-color: #c0392b;
        transform: rotate(324deg);
      }

      /* 奖项名称的显示 */
      .wheel div span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(150%, -380%) rotate(-45deg);
        font-size: 12px;
        color: #fff;
        text-align: center;
      }

      /* 指针样式 */
      .pointer {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 130px solid #333;
        transform: translate(4%, -96%);
        transform-origin: bottom center; /* 将旋转中心点移到指针底部 */
        z-index: 10;
      }
      button {
        width: 100px;
        height: 32px;
        border-radius: 20px;
        margin-top: 40px;
      }
    </style>
  </head>
  <body>
    <div style="display: flex; flex-direction: column; align-items: center">
      <div class="container">
        <div class="wheel" id="wheel">
          <div><span>一等奖</span></div>
          <div><span>二等奖</span></div>
          <div><span>三等奖</span></div>
          <div><span>四等奖</span></div>
          <div><span>五等奖</span></div>
          <div><span>六等奖</span></div>
          <div><span>七等奖</span></div>
          <div><span>八等奖</span></div>
          <div><span>九等奖</span></div>
          <div><span>十等奖</span></div>
        </div>
        <div class="pointer"></div>
      </div>

      <button onclick="spinPointer()">开始抽奖</button>
    </div>
    <script>
      let isSpinning = false
      const pointer = document.querySelector('.pointer')
      // 定义每个奖项及其对应的中奖概率 (权重)
      const prizes = [
        { name: '一等奖', angle: 0, probability: 5 }, // 5% 概率
        { name: '二等奖', angle: 36, probability: 10 }, // 10% 概率
        { name: '三等奖', angle: 72, probability: 15 }, // 15% 概率
        { name: '四等奖', angle: 108, probability: 10 }, // 10% 概率
        { name: '五等奖', angle: 144, probability: 5 }, // 5% 概率
        { name: '六等奖', angle: 180, probability: 20 }, // 20% 概率
        { name: '七等奖', angle: 216, probability: 10 }, // 10% 概率
        { name: '八等奖', angle: 252, probability: 10 }, // 10% 概率
        { name: '九等奖', angle: 288, probability: 5 }, // 5% 概率
        { name: '十等奖', angle: 324, probability: 10 } // 10% 概率
      ]
      // 计算总概率权重
      const totalProbability = prizes.reduce(
        (total, prize) => total + prize.probability,
        0
      )
      // 随机抽奖函数，基于权重
      function getRandomPrize() {
        const random = Math.random() * totalProbability
        let sum = 0
        for (let prize of prizes) {
          sum += prize.probability
          if (random <= sum) {
            return prize
          }
        }
      }
      // 转动指针的函数
      function spinPointer() {
        if (isSpinning) return // 如果正在转动，不允许重复点击

        isSpinning = true
        const selectedPrize = getRandomPrize()
        const spins = Math.floor(Math.random() * 5) + 5 // 随机转动5到10圈
        const totalRotation = spins * 360 + selectedPrize.angle // 指针旋转的总角度
        pointer.style.transition = 'transform 4s ease-out'
        pointer.style.transform = `translate(4%, -96%) rotate(${totalRotation}deg)`

        // 等待动画结束后提示中奖奖项
        setTimeout(() => {
          alert(`恭喜你获得了: ${selectedPrize.name}`)
          isSpinning = false // 允许再次点击
        }, 5000) // 动画时间为5秒
      }
    </script>
  </body>
</html>