如何在每次转盘旋转结束后显示中奖结果？

下面是添加结果提示器的完整修改方案，包含HTML、CSS和JavaScript的调整：

1. 修改HTML结构 #

在转盘容器下方添加结果显示区域：

<div id="mainbox" class="mainbox">
  <div id="box" class="box">
    <div class="box1">
      <span class="span1"><b>$10</b></span>
      <span class="span2"><b>$20</b></span>
      <span class="span3"><b>$30</b></span>
      <span class="span4"><b>$40</b></span>
    </div>
    <div class="box2">
      <span class="span1"><b>$50</b></span>
      <span class="span2"><b>$60</b></span>
      <span class="span3"><b>$70</b></span>
      <span class="span4"><b>$80</b></span>
    </div>
  </div>

  <button class="spin" onclick="myfunction()">SPIN</button>
</div>
<!-- 添加结果显示容器 -->
<div id="resultDisplay" class="result-display"></div>

2. 添加结果区域样式 #

在CSS末尾添加结果展示的样式：

.result-display {
  margin-top: 30px;
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  min-height: 40px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

3. 更新JavaScript逻辑 #

修改JS代码，添加奖项匹配逻辑，在转盘停止后显示中奖结果：

var spinCount = 0;
// 定义每个奖项对应的角度范围
const prizes = [
  { range: [0, 45], value: "$40" },
  { range: [45, 90], value: "$50" },
  { range: [90, 135], value: "$80" },
  { range: [135, 180], value: "$60" },
  { range: [180, 225], value: "$20" },
  { range: [225, 270], value: "$70" },
  { range: [270, 315], value: "$10" },
  { range: [315, 360], value: "$30" }
];

function myfunction() {
  if (spinCount > 3) {
    alert("No more Spins");
    return false;
  }
  var x = 1024; // 最小旋转角度
  var y = 9999; // 最大旋转角度

  // 修正随机角度计算（原公式会生成负数，调整为(y-x)确保正数）
  var deg = Math.floor(Math.random() * (y - x)) + x;

  document.getElementById('box').style.transform = "rotate(" + deg + "deg)";

  var element = document.getElementById('mainbox');
  element.classList.remove('animate');
  // 清空上一次的结果
  document.getElementById('resultDisplay').textContent = "";

  setTimeout(function() {
    element.classList.add('animate');
    // 计算转盘最终停止的角度（取模360得到0-359的范围）
    const finalDeg = deg % 360;
    // 匹配对应的奖项
    let winningPrize = "";
    for (let prize of prizes) {
      if (finalDeg >= prize.range[0] && finalDeg < prize.range[1]) {
        winningPrize = prize.value;
        break;
      }
    }
    // 显示中奖结果
    document.getElementById('resultDisplay').textContent = `恭喜你获得：${winningPrize}`;
  }, 5000); // 等待转盘旋转结束（5秒）
  spinCount++;
}

关键说明 #

• 角度匹配逻辑：转盘分为8个奖项，每个奖项对应45度范围（360°/8=45°），通过计算最终旋转角度的余数，匹配到对应的奖项。
• 修正随机角度：原代码中Math.random() * (x - y)会生成负数，调整为(y - x)确保生成正数角度，符合直观的顺时针旋转逻辑。
• 结果显示时机：利用setTimeout在转盘5秒旋转动画结束后，再计算并展示结果，保证同步性。

内容的提问来源于stack exchange，提问作者Tpp