如何识别网页转盘停止位置？代码修复求助

问题说明 #

我有一个分为8个均等区块的转盘，每个区块颜色不同，用户点击按钮后转盘随机旋转并停止。需要检测转盘的停止位置，判断其停在verdade还是desafio，但现有代码无法实现该检测功能，请求修复。

当前代码 #

HTML #

<button id="spin">Spin</button>
<span class="arrow"></span>
<div class="container">
  <div class="one" data-value="verdade">Verdade</div>
  <div class="two" data-value="desafio">Desafio</div>
  <div class="three" data-value="verdade">Verdade</div>
  <div class="four" data-value="desafio">Desafio</div>
  <div class="five" data-value="verdade">Verdade</div>
  <div class="six" data-value="desafio">Desafio</div>
  <div class="seven" data-value="verdade">Verdade</div>
  <div class="eight" data-value="desafio">Desafio</div>
</div>

CSS #

.container {
  width: 500px;
  height: 500px;
  background-color: #ccc;
  border-radius: 50%;
  border: 15px solid #dde;
  position: relative;
  overflow: hidden;
  transition: 5s;
}

.container div {
  height: 50%;
  width: 200px;
  position: absolute;
  clip-path: polygon(100% 0, 50% 100%, 0 0);
  transform: translateX(-50%);
  transform-origin: bottom;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  font-family: sans-serif;
  color: #fff;
  left: 135px;
}

.container .one {
  background-color: #3f51b5;
  left: 50%;
}

.container .two {
  background-color: #ff9800;
  transform: rotate(45deg);
}

.container .three {
  background-color: #e91e63;
  transform: rotate(90deg);
}

.container .four {
  background-color: #4caf50;
  transform: rotate(135deg);
}

.container .five {
  background-color: #009688;
  transform: rotate(180deg);
}

.container .six {
  background-color: #795548;
  transform: rotate(225deg);
}

.container .seven {
  background-color: #9c27b0;
  transform: rotate(270deg);
}

.container .eight {
  background-color: #f44336;
  transform: rotate(315deg);
}

.arrow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
}

.arrow::before {
  content: "\1F817";
  font-size: 50px;
}

#spin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background-color: #e2e2e2;
  text-transform: uppercase;
  border: 5px solid #fff;
  font-weight: bold;
  font-size: 14px;
  color: #a2a2a2;
  width: 60px;
  height: 60px;
  font-family: sans-serif;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  letter-spacing: 1px;
}

原JavaScript代码 #

let container = document.querySelector(".container");
let btn = document.getElementById("spin");

btn.onclick = function() {
  let deg = Math.floor(Math.random() * 10000);
  container.style.transition = "all 10s ease-out";
  container.style.transform = `rotate(${deg}deg)`;
  setTimeout(() => {
    container.style.transition = "none";
    let actualDeg = deg % 360;
    container.style.transform = `rotate(${actualDeg}deg)`;
  }, 10000);
};

function spin() {
  const container = document.querySelector('.container');
  const arrow = document.querySelector('.arrow');
  const spinButton = document.getElementById('spin');
  const slices = document.querySelectorAll('.container div');

  let deg = Math.floor(5000 + Math.random() * 5000);

  spinButton.style.pointerEvents = 'none';

  container.style.transition = 'all 5s ease-out';
  container.style.transform = `rotate(${deg}deg)`;

  let winningSlice = slices[Math.floor(deg % 360 / (360 / slices.length))];
  let winningColor = window.getComputedStyle(winningSlice).backgroundColor;

  setTimeout(function() {
    spinButton.style.pointerEvents = 'auto';
    arrow.style.borderColor = winningColor;
  }, 5000);
}

修复后的JavaScript代码 #

const container = document.querySelector(".container");
const btn = document.getElementById("spin");
const arrow = document.querySelector('.arrow');
const slices = document.querySelectorAll('.container div');
const sliceDeg = 360 / slices.length; // 每个区块占45度

btn.onclick = function() {
  // 禁用按钮防止重复点击
  btn.style.pointerEvents = 'none';
  
  // 生成随机旋转角度（保证足够多的旋转圈数）
  let deg = Math.floor(5000 + Math.random() * 5000);
  
  // 执行旋转动画
  container.style.transition = "all 5s ease-out";
  container.style.transform = `rotate(${deg}deg)`;
  
  // 动画结束后处理结果
  setTimeout(() => {
    // 重置过渡，修正最终角度到0-360范围
    container.style.transition = "none";
    const actualDeg = deg % 360;
    container.style.transform = `rotate(${actualDeg}deg)`;
    
    // 计算箭头指向的区块：调整角度为从顶部箭头开始的顺时针偏移
    const adjustedDeg = (360 - actualDeg) % 360;
    // 获取对应区块索引
    const winningIndex = Math.floor(adjustedDeg / sliceDeg);
    const winningSlice = slices[winningIndex];
    
    // 获取区块的类型和颜色
    const winningType = winningSlice.dataset.value;
    const winningColor = window.getComputedStyle(winningSlice).backgroundColor;
    
    // 更新箭头样式并弹出提示
    arrow.style.color = winningColor;
    alert(`转盘停止在：${winningSlice.textContent}，类型：${winningType}`);
    
    // 重新启用按钮
    btn.style.pointerEvents = 'auto';
  }, 5000);
};

关键修复点 #

• 合并重复逻辑：移除原代码中两个独立的点击事件，统一为一个逻辑，避免冲突
• 修正角度计算：通过(360 - actualDeg) % 360将旋转角度转换为从顶部箭头位置开始的顺时针偏移，确保区块索引计算准确
• 获取区块类型：通过dataset.value读取每个区块的data-value属性，直接判断是verdade还是desafio
• 增强交互体验：添加按钮禁用/启用逻辑，防止重复点击；增加弹窗提示结果，更新箭头颜色匹配获胜区块

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