Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.10.2016, 17:39
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

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

<!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) и перекрашивались в другой цвет. На следующую секунду, те что стали другого цвета возвращались в исходное положение, а появлялась новая группа элементов.
Ответить с цитированием
  #2 (permalink)  
Старый 23.10.2016, 18:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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>
Ответить с цитированием
  #3 (permalink)  
Старый 23.10.2016, 19:05
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

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

Последний раз редактировалось Black_Star, 23.10.2016 в 19:16.
Ответить с цитированием
  #4 (permalink)  
Старый 23.10.2016, 19:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от Black_Star
Хотелось бы каждый новый цикл, новые желтые дивы
именно так и работает скрипт.
Ответить с цитированием
  #5 (permalink)  
Старый 23.10.2016, 19:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от Black_Star
желтый квадраты в красные, а уже потом сбрасывает
не осилил.
Ответить с цитированием
  #6 (permalink)  
Старый 23.10.2016, 20:53
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

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


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

Последний раз редактировалось Black_Star, 23.10.2016 в 20:56.
Ответить с цитированием
  #7 (permalink)  
Старый 23.10.2016, 21:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение css стилей в зависимости от количества элементов spaiker2009 Элементы интерфейса 1 30.09.2015 23:23
Выбор дочерних элементов Grendel Элементы интерфейса 3 25.08.2014 14:52
Выбор случайного слова из списка alerzo Элементы интерфейса 3 19.04.2014 15:46
Изменение множества элементов Input по определённом призна Лавсановые Волокна Элементы интерфейса 1 24.12.2010 10:37
Выбор элементов и построение списка выбранных элементов. madgals Events/DOM/Window 6 14.04.2009 22:30