JavaScript является одним из основных инструментов для придания интерактивности веб-сайтам. Посредством JavaScript можно создавать анимации, обрабатывать пользовательские действия и делать сайт более привлекательным и динамичным. Давайте рассмотрим основы JavaScript на простом примере интерактивного элемента.
Пример: Создание кнопки-анимации на сайте.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример анимации с помощью JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="myButton">Нажми меня!</button>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css):
#myButton {
padding: 10px 20px;
font-size: 16px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
JavaScript (script.js):
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
button.style.backgroundColor = 'red';
button.style.transform = 'scale(1.2)';
setTimeout(function() {
button.style.backgroundColor = '#3498db';
button.style.transform = 'scale(1)';
}, 1000);
});
Этот простой пример демонстрирует создание кнопки, которая изменяет цвет и масштаб при нажатии на нее. JavaScript позволяет легко добавлять такие интерактивные элементы на веб-страницы, делая их более привлекательными и удобными для пользователей.
🔥 Хотите узнать больше о создании сайтов?
* Подписывайтесь на канал Telegram:
*Читайте мои статьи на vc.ru:
https://vc.ru/u/1430166-ot-akkordov-k-kodu
* Посмотрите мое портфолио: