如何修改圆形旋转菜单代码让选中项最终旋转定位到90度而非0度

云原生阿岚

2026-10-2

解决方案

仅需修改JS代码中move函数的endAngle计算逻辑即可，修改后点击选中的菜单项会旋转到90度（正右方）位置停止：

修改说明

原来的endAngle计算的是将选中项移动到初始0度（正上方）位置的目标角度，现在额外偏移Math.PI / 2（即90度对应的弧度值），就能让选中项停在正右方。额外添加的+ 2 * Math.PI和取模操作是为了避免负角度导致旋转路径异常。

修改后完整JS代码

const buttons = Array.from(document.querySelectorAll('.result-button'))
const count = buttons.length
const increase = Math.PI * 2 / buttons.length
const radius = 125
let angle = 0

buttons.forEach((button, i) => {
  button.style.top = Math.sin(-Math.PI / 2 + i * increase) * radius + 'px'
  button.style.left = Math.cos(-Math.PI / 2 + i * increase) * radius + 'px'
  button.addEventListener('click', move)
})

function move(e) {
  const n = buttons.indexOf(e.target)
  // 仅修改这一行的偏移量即可调整停止位置
  const endAngle = ((n % count) * increase - Math.PI / 2 + 2 * Math.PI) % (2 * Math.PI)
  console.log(endAngle)
  turn()

  function turn() {
    if (Math.abs(endAngle - angle) > 1 / 8) {
      const sign = endAngle > angle ? 1 : -1
      angle = angle + sign / 8
      setTimeout(turn, 20)
    } else {
      angle = endAngle
    }
    buttons.forEach((button, i) => {
      button.style.top = Math.sin(-Math.PI / 2 + i * increase - angle) * radius + 'px'
      button.style.left = Math.cos(-Math.PI / 2 + i * increase - angle) * radius + 'px'
    })
  }
}