Форум

Владислав Star · #1 (**permalink**) 02.08.2018, 18:01

Здравствуйте, к примеру есть блок из onclick при нажатии на него появляеться рандомный из 10 других блоков а потом исчезает через N секунд и так новый блок при каждом появлении, помогите сделать в js, буду благодарен

рони · #2 (**permalink**) 02.08.2018, 18:11

Владислав Star,
сделайте минимальный макет.

Dilettante_Pro · #3 (**permalink**) 02.08.2018, 18:22

Владислав Star,
Не вполне понятно:

Сообщение от Владислав Star

есть блок

Этот блок всегда виден или тоже исчезает через N секунд?

Сообщение от Владислав Star

появляеться рандомный из 10 других блоков

А эти блоки кликабельны?

j0hnik · #4 (**permalink**) 02.08.2018, 18:34

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

<!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>

Владислав Star · #5 (**permalink**) 02.08.2018, 18:41

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

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

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

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

j0hnik · #7 (**permalink**) 02.08.2018, 18:45

<!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>

рони · #8 (**permalink**) 02.08.2018, 19:03

j0hnik,
строка 36, а без 'none' могёшь?

j0hnik · #9 (**permalink**) 02.08.2018, 19:16

рони,

block[rnd].style= '';

так?

рони · #10 (**permalink**) 02.08.2018, 19:18

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

Форум

Справочник

Discord чат

Курсы javascript