使用hsl和javascript制作动态彩色圆圈，使用for循环和映射功能

我想要达到的目标

但是在此代码中，[0]将以红色（而不是紫色）开头。（12点）不需要边界。 我可以随机循环代码中的颜色，或使所有hsl颜色具有相同的颜色，但无法以有序方式增加hsl的色调部分，让我解释一下：

在该函数上生成数组：

var firstcolor = 1;
  var endcolor = 360;
  const itemslength = document.querySelectorAll('.circle a').length;
  const sortearcolores = Math.trunc(360 / itemslength);
  var arr = [];
  for (var i3 = firstcolor; i3 < endcolor+1;  i3 += sortearcolores) {
    arr.push(i3)
  }

  console.log(arr)

因此，问题显然在这个循环中出现了错误，并且不知道我是否使用了错误的函数

HTML

<nav class="circular-menu">
       <div class="circle">
        <a href="" class="sub-circle"></a>
        <a href="" class="sub-circle"></a>
        <a href="" class="sub-circle"></a>
        <a href="" class="sub-circle"></a>
        <a href="" class="sub-circle"></a>
        <a href="" class="sub-circle"></a>
        <a href="" class="sub-circle"></a>
        <a href="" class="sub-circle"></a>
      </div>


  <a href="" class="menu-button fa fa-bars fa-2x">+</a>
</nav>

完整Javascript

window.onload = function(){ 
//NON IMPORTANT FOR THE ISSUE
var items = document.querySelectorAll('.circle a');

for(var i = 0, l = items.length; i < l; i++) {
  items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

  items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

}

items = (function(arr){
  var firstcolor = 1;
  var endcolor = 360;
  const itemslength = document.querySelectorAll('.circle a').length;
  const sortearcolores = Math.trunc(360 / itemslength);
  var arr = [];
  for (var i3 = firstcolor; i3 < endcolor+1;  i3 += sortearcolores) {
    arr.push(i3)
  }

  console.log(arr)

  var items = document.querySelectorAll('.circle a');
  for(var i = 0, l = items.length; i < l; i++) {
    arr.map((value, index) => {
      items[i].style.backgroundColor = `hsla(${ value },91%,65%,1)`;
      console.log(value)
    }
  )}
})

items()

document.querySelector('.menu-button').onclick = function(e) {
   e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}
};

window.onload=function（）{
//这个问题不重要
var items=document.querySelectorAll（'.circle a'）；
对于（变量i=0，l=items.length；i{
items[i].style.backgroundColor=`hsla（${value}，91%，65%，1）`；
console.log（值）
}
)}
})
项目（）
document.querySelector（'.menu button'）。onclick=function（e）{
e、 preventDefault（）；document.querySelector（'.circle'）。classList.toggle（'open'）；
}
};

代码笔：

已解决！ Map函数不是必需的，所以我在for循环中遍历了arr[I]的项

window.onload = function(){ 

  var items = document.querySelectorAll('.circle a');

  for(var i = 0, l = items.length; i < l; i++) {
    items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

    items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

  }

  items = (function(arr){
    var firstcolor = 1;
    var endcolor = 360;
    const itemslength = document.querySelectorAll('.circle a').length;
    const sortearcolores = Math.trunc(360 / itemslength);
    var arr = [];
    for (var i3 = firstcolor; i3 < endcolor+1;  i3 += sortearcolores) {
      arr.push(i3)
    }

    var items = document.querySelectorAll('.circle a');
    for(var i = 0, l = items.length; i < l; i++) {
          items[i].style.backgroundColor = `hsla(${ arr[i]},91%,65%,1)`;
    }
  })

  items()

  document.querySelector('.menu-button').onclick = function(e) {
     e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
  }
  };

window.onload=function（）{
var items=document.querySelectorAll（'.circle a'）；
对于（变量i=0，l=items.length；i

window.onload = function(){ 

  var items = document.querySelectorAll('.circle a');

  for(var i = 0, l = items.length; i < l; i++) {
    items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

    items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

  }

  items = (function(arr){
    var firstcolor = 1;
    var endcolor = 360;
    const itemslength = document.querySelectorAll('.circle a').length;
    const sortearcolores = Math.trunc(360 / itemslength);
    var arr = [];
    for (var i3 = firstcolor; i3 < endcolor+1;  i3 += sortearcolores) {
      arr.push(i3)
    }

    var items = document.querySelectorAll('.circle a');
    for(var i = 0, l = items.length; i < l; i++) {
          items[i].style.backgroundColor = `hsla(${ arr[i]},91%,65%,1)`;
    }
  })

  items()

  document.querySelector('.menu-button').onclick = function(e) {
     e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
  }
  };