Форум

ufaclub · #1 (**permalink**) 07.10.2019, 13:29

function next(arr) {
      var max = arr.length - 1,
        i = -1;
      return function () {
        i = i < max ? i + 1 : 0;
        return arr[i];
      };
    }
	
	
	
    $(function () {
      var slider = next($('svg path'));
      var curent;
      setInterval(function () {
        if (curent) $(curent).removeClass('red');
        curent = slider();
        $(curent).addClass('red');
      }, 150);
    });

вот такой код находит все path внутри svg и на 150 мс выставляет им class=red

как бы мне сделать чтобы не по кругу перебор был в случайном порядке? и класс присваивался бы не только red но и green , blue.

т.е случай элемент из массива и случайный class

laimas · #2 (**permalink**) 07.10.2019, 14:19

next(arr) должна возвращать случайный индекс массива.

ufaclub · #3 (**permalink**) 07.10.2019, 20:12

Пример бы... что то не получается (( помогите кто может пожалуйста.

laimas · #4 (**permalink**) 07.10.2019, 20:18

Так по ссылке и примеры, сразу же первое и можно взять.

function next(arr) {
  return Math.floor(Math.random() * Math.floor(arr.length));
}

ufaclub · #5 (**permalink**) 07.10.2019, 21:55

function next(arr) {
  return Math.floor(Math.random() * Math.floor(arr.length));
}


	
	
    $(function () {
      var slider = next($('svg path'));
      var curent;
      setInterval(function () {
        if (curent) $(curent).removeClass('red');
        curent = slider();
        $(curent).addClass('red');
      }, 150);
    });

сделал так вообще ничего не работает

рони · #6 (**permalink**) 07.10.2019, 21:56

ufaclub,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script>

   addEventListener('DOMContentLoaded', function() {
   const elems = [...document.querySelectorAll("path")],
   palette = ['red', 'green', 'blue'],
   getElem = arr => arr[arr.length * Math.random()|0],
   timer = () => {
       const path = getElem(elems), color = getElem(palette);
       path.style.fill = color;
       setTimeout(timer, 150)
   };
   timer()
     });
  </script>
</head>

<body>
    <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>

</svg>

</body>
</html>

ufaclub · #7 (**permalink**) 08.10.2019, 09:07

вот спасибо!

Форум

Справочник

Discord чат

Курсы javascript