Привет! Сегодня я хочу рассказать вам о моем личном опыте написания кода на JavaScript для создания анимации кнопки, которая изменяет цвет фона при наведении курсора мыши․
Следующим шагом было написание CSS-стилей для кнопки․ Начальный цвет фона я установил в белый, а конечный — в зеленый, как требуется в задании․ Кроме того, я добавил transition, чтобы анимация была плавной, и указал продолжительность в 0٫5 секунды․css
#btn {
background-color⁚ white;
transition⁚ background-color 0․5s;
}
#btn⁚hover {
background-color⁚ green;
}
Теперь перейдем к JavaScript-коду, который добавляет анимацию к кнопке․ Я использовал событие ″mouseenter″ для определения, когда курсор мыши наведен на кнопку, и событие ″mouseleave″ для определения, когда курсор мыши покидает кнопку․javascript
var btn document․getElementById(″btn″);
var count 0;
btn․addEventListener(″mouseenter″, changeColor);
btn․addEventListener(″mouseleave″, resetColor);
function changeColor {
count ;
if (count < 3) {
btn․style․backgroundColor ″green″;
} else {
btn․removeEventListener(″mouseenter″, changeColor);
}
}
function resetColor {
btn․style;backgroundColor ″white″;
}
В переменной ″btn″ я сохраняю ссылку на кнопку с помощью метода getElementById․ Затем я создал переменную ″count″, которая используется для отслеживания количества повторений анимации․ Добавил слушатели событий ″mouseenter″ и ″mouseleave″ к кнопке с помощью метода addEventListener․ В функции ″changeColor″ я увеличиваю счетчик ″count″ и изменяю цвет фона кнопки на зеленый, если количество повторений не превышает 3․ Если количество повторений больше 3, то я удаляю слушатель события ″mouseenter″ с помощью метода removeEventListener․ В функции ″resetColor″ я изменяю цвет фона кнопки на белый при событии ″mouseleave″․ Теперь, когда я навожу курсор мыши на кнопку, анимация запускается, и цвет фона меняется на зеленый․ Через 0,5 секунды цвет фона плавно возвращается к белому․ Этот цикл повторяется еще два раза, после чего анимация останавливается․ Я был очень удовлетворен результатом этого кода․ Анимация кнопки выглядит гармонично и привлекательно, подчеркивая интерактивность элемента․