Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.01.2019, 14:53
Новичок на форуме
Отправить личное сообщение для biflee Посмотреть профиль Найти все сообщения от biflee
 
Регистрация: 09.01.2019
Сообщений: 1

Постоянное изменение размера квадрата при клике
Добрый день, прошу помощи с JS, задача такова:
Создать квадрат, который начинает постоянно увеличваться в размерах при нажатии по нему мышью, при повторном нажатии уменьшаться в размерах.
Буду очень признателен за помощь, никак не могу разобраться.
Ответить с цитированием
  #2 (permalink)  
Старый 09.01.2019, 17:33
Аватар для VооDоо
Интересующийся
Отправить личное сообщение для VооDоо Посмотреть профиль Найти все сообщения от VооDоо
 
Регистрация: 09.01.2019
Сообщений: 14

Вариант. Тут еще можно (нужно) вставить 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>

Последний раз редактировалось VооDоо, 09.01.2019 в 17:37.
Ответить с цитированием
  #3 (permalink)  
Старый 09.01.2019, 18:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

VооDоо,
строку 30 лучше перенести в строку 41 и подкорректировать, если нет задачи подвесить браузер.
Ответить с цитированием
  #4 (permalink)  
Старый 09.01.2019, 18:47
Аватар для VооDоо
Интересующийся
Отправить личное сообщение для VооDоо Посмотреть профиль Найти все сообщения от VооDоо
 
Регистрация: 09.01.2019
Сообщений: 14

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

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

Последний раз редактировалось VооDоо, 09.01.2019 в 18:49.
Ответить с цитированием
  #5 (permalink)  
Старый 09.01.2019, 23:02
Аспирант
Отправить личное сообщение для RX200 Посмотреть профиль Найти все сообщения от RX200
 
Регистрация: 06.02.2011
Сообщений: 54

VооDоо,
Точнее в строке 41 size += dx * (size / 100); Иначе уменьшается до нуля а потом отрицательные размеры идут, что делает уменьшение не постоянным.
Ответить с цитированием
  #6 (permalink)  
Старый 10.01.2019, 15:26
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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

Последний раз редактировалось j0hnik, 10.01.2019 в 15:28.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение содержимого тега при клике на блок Javany11 Элементы интерфейса 2 10.03.2018 15:29
Fancybox при клике на метку Яндекс.Карт не работает с параметрами imax57 jQuery 0 04.10.2014 09:18
скрыть открыть тот или иной блок при клике на ссылке ufaclub jQuery 9 26.08.2014 00:14
При клике на ссылку ничего не происходит gurg0n Элементы интерфейса 2 24.06.2013 11:11
Изменение стилей при клике на ссылку Avro Элементы интерфейса 2 11.04.2011 19:19