当前位置：首页 > JavaScript

js实现转盘

2026-04-04 13:02:06JavaScript

实现转盘的基本思路

使用HTML、CSS和JavaScript创建一个转盘效果，核心是通过CSS的transform属性实现旋转动画，JavaScript控制旋转逻辑和结果判定。

HTML结构

创建一个包含转盘区域和触发按钮的HTML结构：

js实现转盘

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

CSS样式

为转盘添加样式和扇形分割效果：

js实现转盘

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

/* 扇形样式示例（需根据实际奖项数量调整） */
.wheel::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background: #ff5e5e;
  transform-origin: bottom right;
  transform: rotate(0deg) skewY(30deg);
}

JavaScript逻辑

实现旋转控制和结果计算：

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

// 奖项配置（角度范围）
const prizes = [
  { minAngle: 0, maxAngle: 60, text: '一等奖' },
  { minAngle: 60, maxAngle: 120, text: '二等奖' }
  // 添加更多奖项...
];

spinBtn.addEventListener('click', () => {
  if (isSpinning) return;
  isSpinning = true;

  // 随机旋转角度（5-10圈 + 奖项角度）
  const spinDegrees = 1800 + Math.floor(Math.random() * 1800);
  const finalAngle = spinDegrees % 360;

  wheel.style.transform = `rotate(${spinDegrees}deg)`;

  setTimeout(() => {
    isSpinning = false;
    const prize = prizes.find(p => 
      finalAngle >= p.minAngle && finalAngle < p.maxAngle
    );
    alert(`恭喜获得: ${prize.text}`);
  }, 4000);
});

动态生成扇形

使用JavaScript动态创建更精确的扇形分割：

function createWheelSectors() {
  const sectorAngle = 360 / prizes.length;
  prizes.forEach((prize, index) => {
    const sector = document.createElement('div');
    sector.className = 'sector';
    sector.style.transform = `rotate(${index * sectorAngle}deg)`;
    sector.style.backgroundColor = getRandomColor();
    sector.textContent = prize.text;
    wheel.appendChild(sector);
  });
}