js实现抽奖效果

实现抽奖效果的基本思路

使用JavaScript实现抽奖效果通常涉及随机选择奖项、动画效果以及结果展示。以下是一个完整的实现方案。

核心代码实现

// 奖项配置
const prizes = [
  { name: '一等奖', color: '#f00' },
  { name: '二等奖', color: '#0f0' },
  { name: '三等奖', color: '#00f' },
  { name: '四等奖', color: '#ff0' },
  { name: '五等奖', color: '#f0f' },
  { name: '谢谢参与', color: '#0ff' }
];

// DOM元素
const wheel = document.getElementById('wheel');
const startBtn = document.getElementById('start');
const result = document.getElementById('result');

// 创建转盘
function createWheel() {
  const sectorAngle = 360 / prizes.length;
  prizes.forEach((prize, index) => {
    const sector = document.createElement('div');
    sector.className = 'sector';
    sector.style.transform = `rotate(${sectorAngle * index}deg)`;
    sector.style.backgroundColor = prize.color;
    sector.innerHTML = `<span>${prize.name}</span>`;
    wheel.appendChild(sector);
  });
}

// 抽奖函数
function startLottery() {
  startBtn.disabled = true;
  const duration = 3000; // 动画持续时间
  const spins = 5; // 旋转圈数
  const targetIndex = Math.floor(Math.random() * prizes.length);
  const targetAngle = 360 * spins + (360 / prizes.length) * targetIndex;

  wheel.style.transition = `transform ${duration}ms cubic-bezier(0.17, 0.89, 0.32, 1.27)`;
  wheel.style.transform = `rotate(${targetAngle}deg)`;

  setTimeout(() => {
    result.textContent = `恭喜获得: ${prizes[targetIndex].name}`;
    startBtn.disabled = false;
    wheel.style.transition = 'none';
    wheel.style.transform = `rotate(${targetAngle % 360}deg)`;
  }, duration);
}

// 初始化
createWheel();
startBtn.addEventListener('click', startLottery);

配套CSS样式

#wheel {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  transition: transform 0s;
}

.sector {
  position: absolute;
  width: 50%;
  height: 50%;
  transform-origin: 100% 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sector span {
  transform: rotate(45deg);
  display: inline-block;
  color: white;
  font-weight: bold;
}

#start {
  margin-top: 20px;
  padding: 10px 20px;
  cursor: pointer;
}

实现要点

转盘动画使用CSS transform实现平滑旋转效果，通过cubic-bezier函数使动画有缓动效果更自然。随机选择目标奖项后计算对应的旋转角度，确保指针最终停在正确位置。

旋转结束后重置transition属性，避免下次旋转时出现异常。通过setTimeout在动画结束后显示结果并重置按钮状态。

扩展功能建议

增加音效增强体验，抽奖过程中播放旋转音效，结束时播放获奖音效。添加中奖概率控制，不同奖项设置不同中奖几率。实现多次抽奖功能，记录历史中奖结果。

注意事项

确保转盘初始位置与奖项对应关系正确，调试时可以先固定目标奖项测试定位准确性。移动端需要考虑触摸事件支持，添加touchstart等事件处理。性能优化方面，避免频繁DOM操作，使用requestAnimationFrame优化动画。