当前位置：首页 > JavaScript

js实现轮盘

2026-04-05 17:32:10JavaScript

js实现轮盘抽奖功能

轮盘抽奖是一种常见的互动效果，可以通过CSS动画和JavaScript实现。以下是完整的实现方案：

基本HTML结构

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

CSS样式设置

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

.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);
}

.slice {
  position: absolute;
  width: 50%;
  height: 50%;
  transform-origin: 100% 100%;
  left: 0;
  top: 0;
  text-align: center;
}

#spin-btn {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background: #ff5252;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JavaScript实现逻辑

const prizes = ['一等奖', '二等奖', '三等奖', '四等奖', '五等奖', '六等奖'];
const colors = ['#FF5252', '#FF4081', '#E040FB', '#7C4DFF', '#536DFE', '#448AFF'];
const wheel = document.querySelector('.wheel');
const spinBtn = document.getElementById('spin-btn');

// 创建轮盘扇形
function createWheel() {
  const sliceAngle = 360 / prizes.length;

  prizes.forEach((prize, index) => {
    const slice = document.createElement('div');
    slice.className = 'slice';
    slice.style.backgroundColor = colors[index];
    slice.style.transform = `rotate(${sliceAngle * index}deg) skewY(${90 - sliceAngle}deg)`;

    const label = document.createElement('div');
    label.textContent = prize;
    label.style.transform = `skewY(${sliceAngle - 90}deg) rotate(${sliceAngle / 2}deg)`;
    label.style.position = 'absolute';
    label.style.right = '20px';
    label.style.top = '30px';

    slice.appendChild(label);
    wheel.appendChild(slice);
  });
}

// 旋转轮盘
function spinWheel() {
  spinBtn.disabled = true;
  const randomAngle = 360 * 5 + Math.floor(Math.random() * 360);
  wheel.style.transform = `rotate(${-randomAngle}deg)`;

  setTimeout(() => {
    const sliceAngle = 360 / prizes.length;
    const normalizedAngle = randomAngle % 360;
    const winningIndex = Math.floor((360 - normalizedAngle) / sliceAngle);
    alert(`恭喜获得: ${prizes[winningIndex]}`);
    spinBtn.disabled = false;
  }, 4000);
}

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

功能优化建议

增加旋转音效可以提升用户体验：

function playSpinSound() {
  const audio = new Audio('spin-sound.mp3');
  audio.play();
}

添加指针元素可以更清晰地指示获奖结果：

js实现轮盘

<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;
}