使用 for 循环和 map 函数用 hsl 和 javascript 制作一个动态色圈

Question

我想达到的目标

但是在此代码中，a[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)

并在控制台上抛出：[1, 46, 91, 136, 181, 226, 271, 316] 正确!

但是当我通过它们映射时，我在每个项目中生成一个等于上面一个的新数组：

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)
        }
      )}

所以问题在这个循环中很明显地被排除了，不知道我是否使用了错误的函数。

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');
}
};

代码笔：https://codepen.io/sanchocreativo/pen/XWWrvRR

Answer 1

已解决！ 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');
  }
  };

使用 for 循环和 map 函数用 hsl 和 javascript 制作一个动态色圈

Make a dynamic chromatic circle with hsl and javascript using for loop and map function

javascript

hsl

for-loop

ecmascript-6