Форум

biflee · #1 (**permalink**) 09.01.2019, 14:53

Добрый день, прошу помощи с JS, задача такова:
Создать квадрат, который начинает постоянно увеличваться в размерах при нажатии по нему мышью, при повторном нажатии уменьшаться в размерах.
Буду очень признателен за помощь, никак не могу разобраться.

VооDоо · #2 (**permalink**) 09.01.2019, 17:33

Вариант. Тут еще можно (нужно) вставить clearTimeout, когда размеры блока выйдут за заданные значения. Но думаю, доделаете уже под себя...

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>BlockSize Demo</title>
</head>
<body>
	
	<div id="block"></div>

	<style>
	#block{
		width: 100px;
		height: 100px;
		position: absolute;
		top: 100px;
		left: 100px;
		background-color: #eee;
		border: 2px solid #ccc;
                cursor: pointer;
	}
</style>

<script>
	var block = document.getElementById('block'),
	size = 100,
	dx = -2;

	block.addEventListener('click', function(e){
		setTimeout(tick(), 1000);
		dx *= -1;
	});

	function tick(){
		setInterval(function(){
			size += dx;
			block.style.width = size + 'px';
			block.style.height = size + 'px';
		}, 200)
	};

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

рони · #3 (**permalink**) 09.01.2019, 18:30

VооDоо,
строку 30 лучше перенести в строку 41 и подкорректировать, если нет задачи подвесить браузер.

VооDоо · #4 (**permalink**) 09.01.2019, 18:47

рони,
да, правда... Еще вот так можно:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>BlockSize Demo</title>
</head>
<body>
	
	<div id="block"></div>

	<style>
	#block{
		width: 100px;
		height: 100px;
		position: absolute;
		top: 100px;
		left: 100px;
		background-color: #eee;
		border: 2px solid #ccc;
                cursor: pointer;
	}
</style>

<script>
	var block = document.getElementById('block'),
	size = 100,
	dx = 2,
	run = false;

	block.addEventListener('click', function(e){
		if(!run){
			run = !run;
			tick();
		}else{
			dx *= -1;
		}
	});

	function tick(){
		setInterval(function(){
			size += dx;
			block.style.width = block.style.height  = size + 'px';
		}, 200)
	};

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

RX200 · #5 (**permalink**) 09.01.2019, 23:02

VооDоо,
Точнее в строке 41 size += dx * (size / 100); Иначе уменьшается до нуля а потом отрицательные размеры идут, что делает уменьшение не постоянным.

j0hnik · #6 (**permalink**) 10.01.2019, 15:26

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		#square {
			width: 100px;
			height: 100px;
			border: 1px solid red;
			transition: 0.05s;
		}
	</style>
</head>

<body>
	<div id="square"></div>
	<script>
		var size = 100, flag = false, tm;
		square.onclick = e => {
			flag = !flag;
			clearTimeout(tm);
			(run = () => {
				square.style.width = square.style.height = (flag ? size++ : size--) + 'px';
				if (size > 0) tm = setTimeout(run, 50);
			})();
		};

	</script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript