HTML, CSS и JavaScript. Три языка — одна программа.
В этом уроке мы создадим большую красную кнопку, которая будет располагаться в центре окна браузера. При нажатии на кнопку раздастся сигнал тревоги. Готов? Поехали!
Для создания кнопки давай воспользуемся услугами HTML. Как обычно, создадим папку, а внутри нее создадим файл «кнопка.html»
С помощью блокнота вставляем в наш файл следующий код:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src = "action.js"></script>
<form>
<input type = 'button' class="button1" value = 'тревога' onClick = 'x()' />
</form>
</html>Давайте разберемся, что мы тут накодили))
<link rel="stylesheet" href="style.css"> Эта строчка — ссылка на файл «style.css» со стилем кнопки, который мы создадим чуть позже.
<script src = "action.js"></script>А это строка — ссылка на файл «script.js» c функционалом нашей кнопки, (script.js запустит звук 1.mp3 при нажатии на кнопку) его мы тоже создадим чуть позже.
<input type = 'button' class="button1" value = 'тревога' onClick = 'x()' />
А вот и сама кнопка, которая при нажатии, вызывает функцию ‘x()’
Теперь давай создадим «style.css». Если у тебя с этим возникли проблемы, вернись к уроку #4. Если нет, то помести в созданный файл код с настройками внешнего вида кнопки:
.button1
{
text-align: center;
text-decoration: blink;
background-color: red;
width: 300px;
height: 150px;
margin-top: 15%;
margin-left:40%;
border-radius: 25px;
}Не станем разбирать код, скажем только, что если все сделано правильно, то кнопка станет большой и красной, а располагаться она будет в центре экрана.
Теперь пришло время создать функционал для нашей кнопки, это мы сделаем в файле «script.js»
function x() {
var audio = new Audio(); // Создаём новый элемент Audio
audio.src = '1.mp3'; // Указываем путь к звуку
audio.autoplay = true; // Автоматически запускаем
} !!! Обратите внимание, что скрипт сможет запустить звук 1.mp3 только если этот самый звук лежит в той же папке, что и script.js
Если тебе вдруг что-то непонятно, не молчи!!! Обязательно попроси у преподавателя в студии объяснить все более подробно!
Удачи!!! Друг мой!!!