как выбрать случайный элемент из цикла
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 :) |
next(arr) должна возвращать случайный индекс массива.
|
Пример бы... что то не получается (( помогите кто может пожалуйста. :)
|
Так по ссылке и примеры, сразу же первое и можно взять.
function next(arr) {
return Math.floor(Math.random() * Math.floor(arr.length));
}
|
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);
});
сделал так вообще ничего не работает |
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>
|
вот спасибо!:)
|
| Часовой пояс GMT +3, время: 10:25. |