js写抽奖转盘

<div id="wheel-container">
  <div id="wheel">
    <div class="segment" style="--angle: 0deg;">奖品1</div>
    <div class="segment" style="--angle: 45deg;">奖品2</div>
    <div class="segment" style="--angle: 90deg;">奖品3</div>
    <div class="segment" style="--angle: 135deg;">奖品4</div>
    <div class="segment" style="--angle: 180deg;">奖品5</div>
    <div class="segment" style="--angle: 225deg;">奖品6</div>
    <div class="segment" style="--angle: 270deg;">奖品7</div>
    <div class="segment" style="--angle: 315deg;">奖品8</div>
  </div>
  <button id="spin-button">开始抽奖</button>
</div>

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

#wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #f0f0f0;
  position: relative;
  overflow: hidden;
  transition: transform 5s ease-out;
}

.segment {
  position: absolute;
  width: 50%;
  height: 50%;
  transform-origin: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
}

#spin-button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
}

document.getElementById('spin-button').addEventListener('click', spinWheel);

function spinWheel() {
  const wheel = document.getElementById('wheel');
  const segments = document.querySelectorAll('.segment');
  const randomSegment = Math.floor(Math.random() * segments.length);
  const degrees = 360 * 5 + (randomSegment * 45); // 旋转5圈加上随机角度

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

  setTimeout(() => {
    alert(`恭喜你获得${segments[randomSegment].textContent}`);
  }, 5000);
}