При прочтении книги в ней попалась задачка, вроде пустяк, но я никак не могу понять, как правильно это реализовать, подскажите кто нибудь.
Сама задача: "Используйте setInterval для анимации заголовка h1, двигая его по квадрату, вдоль краев страницы. Пусть он переместится на 200 пикселей вправо, на 200 пикселей вниз, 200 пикселей влево, 200 пикселей вверх, а затем начнет с начала. Подсказка: нужно запоминать текущее направление (вправо, вниз, влево или вверх), чтобы знать, увеличивать или уменьшать для заголовка отступы слева (left) и сверху (top). Кроме того, при достижении угла квадрата нужно будет менять направление."
const h = document.querySelector('h1');
let leftOffset = 0; //начальный отступ слева
let topOffset = 0; //начальный отступ сверху
let direction = 'right'; //начальное направление
setInterval(() => {
switch(direction) {
case 'right':
//если движемся в право, увеличиваем отступ слева на единицу
leftOffset++;
//когда отступ достиг 200 сменяем направление на "вниз"
if(leftOffset === 200) direction = 'bottom';
break;
case 'bottom':
//если движемся в вниз, увеличиваем отступ сверху на единицу
topOffset++;
//когда отступ достиг 200 сменяем направление на "влево"
if(topOffset === 200) direction = 'left';
break;
case 'left':
//если движемся в влево, уменьшаем отступ слева на единицу
leftOffset--;
//когда отступ достиг 0 сменяем направление на "вверх"
if(leftOffset === 0) direction = 'top';
break;
case 'top':
//если движемся в вверх, уменьшаем отступ сверху на единицу
topOffset--;
//когда отступ достиг 0 сменяем направление на "вправо"
if(topOffset === 0) direction = 'right';
break;
}
//задаем элементу измененные отступы
h.style.top = topOffset + 'px';
h.style.left = leftOffset + 'px';
}, 5);
h1{
position: absolute;
left: 0;
top: 0;
}
<h1>s</h1>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Идея такая: есть локальный state (hook), в нем массив из четырех элементовНа экране есть кнопка добавления нового элемента в этот массив
Собираю проект через GulpТакая проблема: написал код, после "прогона" через babel выдал ошибку: regeneratorRuntime is not defined
У меня есть поле создание поста через input, где после нажатия на enter или кнопки опубликовать пост вызывается функция onAddPost