Display a spinning wheel with a random outcome

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>版本9 - 簡易圓盤轉動</title>
<style>
  body { font-family: sans-serif; text-align: center; padding-top: 40px; }
  h2 { margin-bottom: 20px; }
  .wheel-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto 20px auto;
  }
  .wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid #333;
    background: conic-gradient(
      #FF9A9E 0deg 90deg,
      #FAD0C4 90deg 180deg,
      #A1C4FD 180deg 270deg,
      #C2E9FB 270deg 360deg
    );
    transition: transform 4s cubic-bezier(0.25, 1, 0.5, 1);
  }
  /* 指針 */
  .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-bottom: 30px solid #e74c3c;
  }
  button {
    padding: 10px 25px;
    font-size: 1.2em;
    cursor: pointer;
  }
</style>
</head>
<body>

<h2>幸運轉盤</h2>
<div class="wheel-container">
  <div class="pointer"></div>
  <div class="wheel" id="wheel"></div>
</div>
<button onclick="spin()">轉動</button>

<script>
let currentRotation = 0;

function spin() {
  // 720deg = 兩圈，額外加上 0~360 的隨機角度
  const randomDeg = 720 + Math.floor(Math.random() * 360);
  currentRotation += randomDeg; // 累積角度，避免重設動畫方向
  document.getElementById("wheel").style.transform =
    `rotate(${currentRotation}deg)`;
}
</script>

</body>
</html>