Постоянное изменение размера квадрата при клике
Добрый день, прошу помощи с JS, задача такова:
Создать квадрат, который начинает постоянно увеличваться в размерах при нажатии по нему мышью, при повторном нажатии уменьшаться в размерах. Буду очень признателен за помощь, никак не могу разобраться. |
Вариант. Тут еще можно (нужно) вставить 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оо,
строку 30 лучше перенести в строку 41 и подкорректировать, если нет задачи подвесить браузер. |
рони,
да, правда... Еще вот так можно: <!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оо,
Точнее в строке 41 size += dx * (size / 100); Иначе уменьшается до нуля а потом отрицательные размеры идут, что делает уменьшение не постоянным. |
<!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> |
Часовой пояс GMT +3, время: 03:18. |