js 实现转盘

实现转盘抽奖的步骤

HTML 结构

创建一个基础的HTML结构，包含转盘和开始按钮。

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

CSS 样式

使用CSS绘制转盘样式，包括扇形区域和指针。

#wheel {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
}

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

.sector {
  position: absolute;
  width: 50%;
  height: 50%;
  transform-origin: 100% 100%;
}

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

JavaScript 逻辑

实现转盘旋转和结果计算功能。

const sectors = ['奖品1', '奖品2', '奖品3', '奖品4', '奖品5', '奖品6'];
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'];
const container = document.getElementById('wheel-container');
const spinBtn = document.getElementById('spin-btn');
let canSpin = true;

// 创建扇形区域
sectors.forEach((sector, index) => {
  const sectorEl = document.createElement('div');
  sectorEl.className = 'sector';
  sectorEl.style.backgroundColor = colors[index];
  sectorEl.style.transform = `rotate(${(360 / sectors.length) * index}deg)`;

  const text = document.createElement('div');
  text.textContent = sector;
  text.style.position = 'absolute';
  text.style.left = '50%';
  text.style.bottom = '10%';
  text.style.transform = 'translateX(-50%) rotate(90deg)';
  text.style.transformOrigin = '0 0';

  sectorEl.appendChild(text);
  container.appendChild(sectorEl);
});

// 旋转转盘
spinBtn.addEventListener('click', () => {
  if (!canSpin) return;

  canSpin = false;
  const spinDegrees = 360 * 5 + Math.floor(Math.random() * 360);
  container.style.transform = `rotate(${spinDegrees}deg)`;

  setTimeout(() => {
    const actualDegrees = spinDegrees % 360;
    const sectorAngle = 360 / sectors.length;
    const winningIndex = Math.floor((360 - actualDegrees) / sectorAngle) % sectors.length;
    alert(`恭喜获得: ${sectors[winningIndex]}`);
    canSpin = true;
  }, 4000);
});

优化建议

1. 添加旋转动画效果，使用CSS的transition属性实现平滑旋转
2. 在旋转过程中禁用按钮，防止重复点击
3. 计算最终停止位置时，考虑转盘旋转方向和奖品分区角度
4. 可以添加音效增强用户体验

注意事项

1. 扇形区域的数量和颜色需要与奖品数组匹配
2. 旋转时间（4秒）和缓动函数可以根据需求调整
3. 计算结果时需要考虑旋转方向和角度偏移
4. 移动端可能需要调整转盘大小和触摸事件

这个实现包含了基本的转盘抽奖功能，可以根据实际需求进一步扩展和完善。