Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.08.2018, 18:01
Интересующийся
Отправить личное сообщение для Владислав Star Посмотреть профиль Найти все сообщения от Владислав Star
 
Регистрация: 04.05.2018
Сообщений: 22

Появление и исчезновение
Здравствуйте, к примеру есть блок из onclick при нажатии на него появляеться рандомный из 10 других блоков а потом исчезает через N секунд и так новый блок при каждом появлении, помогите сделать в js, буду благодарен
Ответить с цитированием
  #2 (permalink)  
Старый 02.08.2018, 18:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Владислав Star,
сделайте минимальный макет.
Ответить с цитированием
  #3 (permalink)  
Старый 02.08.2018, 18:22
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Владислав Star,
Не вполне понятно:
Сообщение от Владислав Star
есть блок
Этот блок всегда виден или тоже исчезает через N секунд?
Сообщение от Владислав Star
появляеться рандомный из 10 других блоков
А эти блоки кликабельны?
Ответить с цитированием
  #4 (permalink)  
Старый 02.08.2018, 18:34
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

полагаю как то так

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.block{
		display: none;
	}
</style>
</head>
<body>
	<button>Пуск</button>

	<div class="block">1</div>
	<div class="block">2</div>
	<div class="block">3</div>
	<div class="block">4</div>
	<div class="block">5</div>
	<div class="block">6</div>
	<div class="block">7</div>
	<div class="block">8</div>
	<div class="block">9</div>
	<div class="block">10</div>

	<script>
		document.querySelector('button').onclick = function(){
		var block = [...document.querySelectorAll('.block')].sort(_=>Math.random() - 0.5), i = 0;
			(run=()=>{
				block[i].style.display = 'block';
				setTimeout(()=>{
					block[i].style.display = 'none';
					if(++i<block.length) run();
				},1000); //время 
			})();
		};
	</script>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 02.08.2018, 18:41
Интересующийся
Отправить личное сообщение для Владислав Star Посмотреть профиль Найти все сообщения от Владислав Star
 
Регистрация: 04.05.2018
Сообщений: 22

10 блоков из стилем display:none есть или блок ил кнопка по которой кликаеш и появляеться случайный блок из 10 потом исчезает, еще раз кликаеш появляеться еще какой то другой и так до бесконечности

<div id="one" style="position:absolute;height:100px;width:100px; display:none;
background:blue"></div>
и таких штук 10

и есть <button onclick="myfunction()">Click me!</button>
Ответить с цитированием
  #6 (permalink)  
Старый 02.08.2018, 18:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Владислав Star,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #7 (permalink)  
Старый 02.08.2018, 18:45
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.block{
		position:absolute;
		height:100px;
		width:100px;
		display:none;
		background:blue;
	}
</style>
</head>
<body>
	<button>Click me!</button>

	<div class="block">1</div>
	<div class="block">2</div>
	<div class="block">3</div>
	<div class="block">4</div>
	<div class="block">5</div>
	<div class="block">6</div>
	<div class="block">7</div>
	<div class="block">8</div>
	<div class="block">9</div>
	<div class="block">10</div>

	<script>
var block = document.querySelectorAll('.block');
		document.querySelector('button').onclick = function(){
		var rnd = Math.floor(Math.random() * 10);
				block[rnd].style.display = 'block';
				setTimeout(()=>{
					block[rnd].style.display= '';
				},1000); //время 
		};
	</script>
</body>
</html>

Последний раз редактировалось j0hnik, 03.08.2018 в 00:15.
Ответить с цитированием
  #8 (permalink)  
Старый 02.08.2018, 19:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

j0hnik,
строка 36, а без 'none' могёшь?
Ответить с цитированием
  #9 (permalink)  
Старый 02.08.2018, 19:16
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

рони,
block[rnd].style= '';

так?
Ответить с цитированием
  #10 (permalink)  
Старый 02.08.2018, 19:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

j0hnik,
да, и если интересно ещё один вариант!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Появление и исчезновение картинки(объекта) через определенное время. _D1m0n_ Общие вопросы Javascript 27 23.06.2015 15:16
Появление и исчезновение элемента на странице. mastanggt jQuery 3 01.08.2014 17:29
Появление исчезновение элемента при прокрутке страницы JQuery -=Женька=- Общие вопросы Javascript 3 29.06.2014 17:18
Появление и исчезновение блока AllanZ jQuery 4 25.07.2012 17:12
Плавное исчезновение и появление изображения Surlik jQuery 9 17.03.2012 14:27