当前位置：首页 > JavaScript

js实现转盘抽奖

2026-03-01 02:12:43JavaScript

实现转盘抽奖的基本思路

转盘抽奖的核心是通过旋转动画随机停止在某个奖品区域。需要定义奖品区域角度、旋转动画逻辑以及停止后的回调处理。

HTML结构

创建转盘容器和抽奖按钮的HTML结构：

<div class="wheel-container">
  <div class="wheel"></div>
  <button id="spin-btn">开始抽奖</button>
</div>

CSS样式

使用CSS绘制转盘和定义动画：

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

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
  transform: rotate(0deg);
}

/* 奖品扇形区域样式 */
.wheel .section {
  position: absolute;
  width: 50%;
  height: 50%;
  transform-origin: 100% 100%;
}

#spin-btn {
  margin-top: 20px;
  padding: 10px 20px;
}

JavaScript逻辑

实现转盘旋转和随机停止逻辑：

const prizes = [
  { text: "奖品1", color: "#FF6384", angle: 45 },
  { text: "奖品2", color: "#36A2EB", angle: 90 },
  { text: "奖品3", color: "#FFCE56", angle: 135 },
  { text: "奖品4", color: "#4BC0C0", angle: 180 },
  { text: "奖品5", color: "#9966FF", angle: 225 },
  { text: "奖品6", color: "#FF9F40", angle: 270 },
  { text: "奖品7", color: "#8AC24A", angle: 315 },
  { text: "奖品8", color: "#F06292", angle: 360 }
];

const wheel = document.querySelector('.wheel');
const spinBtn = document.getElementById('spin-btn');

// 创建转盘扇形
function createWheelSections() {
  prizes.forEach((prize, index) => {
    const section = document.createElement('div');
    section.className = 'section';
    section.style.backgroundColor = prize.color;
    section.style.transform = `rotate(${index * 45}deg)`;

    const text = document.createElement('div');
    text.textContent = prize.text;
    text.style.position = 'absolute';
    text.style.transform = 'rotate(22.5deg) translate(30px)';
    text.style.transformOrigin = '0 0';

    section.appendChild(text);
    wheel.appendChild(section);
  });
}

// 旋转转盘
function spinWheel() {
  spinBtn.disabled = true;
  const randomSpin = 3600 + Math.floor(Math.random() * 360); // 随机旋转角度
  wheel.style.transform = `rotate(${randomSpin}deg)`;

  setTimeout(() => {
    spinBtn.disabled = false;
    const actualDeg = randomSpin % 360;
    const winnerIndex = Math.floor(actualDeg / 45);
    alert(`恭喜获得: ${prizes[winnerIndex].text}`);
  }, 4000);
}

createWheelSections();
spinBtn.addEventListener('click', spinWheel);

进阶优化

添加缓动动画效果：

wheel.style.transition = 'transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99)';

增加指针元素：

<div class="pointer"></div>

.pointer {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid #333;
  z-index: 10;
}