Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Выбор случайного количества элементов из множества (https://javascript.ru/forum/jquery/65516-vybor-sluchajjnogo-kolichestva-ehlementov-iz-mnozhestva.html)

Black_Star 23.10.2016 17:39
Выбор случайного количества элементов из множества
 
Добрый день. Вот возник интерес, как реализовать выбор случайного количества элементов из множества, как-то пока не встречался с такой выборкой, может вы подскажите ? :)
Простой пример

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<style type="text/css">

	#field {

     position: relative;
     width: 500px;
     height: 300px;
     margin: 2%;
     border: 1px solid black;
 
 }  
	.square {
		 
     float: left;
		 width: 50px;
     height: 50px;
     border: 1px solid black;
    background-color: red;    	
	}

	.yellow {

    background-color: yellow;

  }


</style>
<body>
	<div id="field">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
		<div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
		
	</div>


<script type="text/javascript">
  
window.onload = function() { 


    function  findRandomArr() {

        var allDiv = $('#field > div');
        console.log("allDiv =" + allDiv.length);
        var num = Math.floor(Math.random()* (allDiv.length) ); 
        allDiv.eq(num).addClass('yellow');
    }  

        setInterval(findRandomArr, 1000);

}


</script>
</body>
</html>


Как реализовать что б каждую секунду выбиралась какая-то группа дивов, значение каждый раз разное ( от 1 до divAll.lenght) и перекрашивались в другой цвет. На следующую секунду, те что стали другого цвета возвращались в исходное положение, а появлялась новая группа элементов.

рони 23.10.2016 18:06
Black_Star,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<style type="text/css">

  #field {

     position: relative;
     width: 500px;
     height: 300px;
     margin: 2%;
     border: 1px solid black;

 }
  .square {

     float: left;
     width: 50px;
     height: 50px;
     border: 1px solid black;
     background-color: red;
     transition: all .8s;
  }

  .yellow {

    background-color: yellow;

  }


</style>
<body>
  <div id="field">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>

  </div>


<script type="text/javascript">

window.onload = function() {

       var allDiv = $('#field > div');
    function  findRandomArr() {

     allDiv.each(function() {
     $(this).is('.yellow') ?  $(this).removeClass('yellow') : Math.random() > .3 && $(this).addClass('yellow')
    })


    }

        setInterval(findRandomArr, 1000);

}


</script>
</body>
</html>

Black_Star 23.10.2016 19:05
Спасибо, только оно у вас немного странно работает. Долго я на это смотрел :)
Оно на втором этапе цикла преобразовывает желтый квадраты в красные, а уже потом сбрасывает, и отображает новое. Хотелось бы каждый новый цикл, новые желтые дивы

рони 23.10.2016 19:31
Цитата:
Сообщение от Black_Star
Хотелось бы каждый новый цикл, новые желтые дивы
именно так и работает скрипт.

рони 23.10.2016 19:32
Цитата:
Сообщение от Black_Star
желтый квадраты в красные, а уже потом сбрасывает
не осилил.

Black_Star 23.10.2016 20:53
Цитата:
Сообщение от рони
именно так и работает скрипт.
Сорри, мой косяк. Чё то очень долго залипал на смену картинок. Зрение фокусируется на выбранных элементах, а они бывает такое что и повторяются с инверсией в цвете. (К примеру на кадре 6 желтых квадратов, а на следующем кадре эти же квадраты уже красные, а те которые к ним примыкали уже желтые) Я поставил задержку >3c убедился что всё работает правильно.


А можно ещё уточнить что за условие Math.random() > .3 -как его понимать надо ?

рони 23.10.2016 21:00
Цитата:
Сообщение от Black_Star
Math.random() > .3 -как его понимать надо
в 70% из 100 сменить класс или примерно максимум 2/3 из числа красных могут поменять класс на жёлтый.


Часовой пояс GMT +3, время: 13:39.