当前位置：首页 > article >正文

使用纯CSS和JavaScript来实现一个转盘抽奖效果

article 2024/10/11 0:41:13

使用纯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 spinning = false

      function spinPointer() {
        if (spinning) return
        spinning = true

        const pointer = document.querySelector('.pointer')
        const randomDegree = Math.floor(Math.random() * 360) // 随机角度
        const finalDegree = 360 * 3 + randomDegree // 确保指针至少旋转3圈

        // 旋转指针
        pointer.style.transition = 'transform 2s ease-out'
        pointer.style.transform = `translate(4%, -96%) rotate(${finalDegree}deg)`

        setTimeout(() => {
          spinning = false
          const resultDegree = randomDegree % 360 // 获取最终位置
          console.log(resultDegree, randomDegree, 'randomDegree')
          alert(`抽到的奖项是：${getResult(resultDegree)}`)
        }, 2000) // 2秒后显示结果
      }

      function getResult(degree) {
        const segmentDegrees = 360 / 10 // 每个扇形的度数
        const index =
          Math.floor((degree + segmentDegrees / 2) / segmentDegrees) % 10 // 计算对应的奖项索引
        const awards = [
          '一等奖',
          '二等奖',
          '三等奖',
          '四等奖',
          '五等奖',
          '六等奖',
          '七等奖',
          '八等奖',
          '九等奖',
          '十等奖'
        ]
        return awards[index]
      }
    </script>
  </body>
</html>