Создайте динамический хроматический круг с помощью hsl и javascript, используя для цикла и функции карты - PullRequest
Новая
       60

Создайте динамический хроматический круг с помощью hsl и javascript, используя для цикла и функции карты

0 голосов
/ 04 октября 2019

Чего я хочу достичь

https://i.gyazo.com/9d7a842b93268568b5befcbdc579c7cd.png

Однако в этом коде [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');
}
};

Codepen: https://codepen.io/sanchocreativo/pen/XWWrvRR

1 Ответ

0 голосов
/ 06 октября 2019

Решено! Функция map не нужна, поэтому я перебрал элементы arr [i] в ​​цикле for. 

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