Простой будильник на Javascript
Добро пожаловать в учебник о том, как создать простой будильник с Javascript. Давным-давно, в каменном веке Интернета, даже включить звук будильника было абсолютной болью. Нам приходилось использовать сторонние сценарии Java или Flash и сражаться с драконами с помощью клавиатуры, просто чтобы пошуметь.
Итак, если вы хотите создать простое веб-приложение с будильником, возможно, для школьного проекта или просто для удовлетворения собственного любопытства. Вам повезло. Те темные времена прошли, и это руководство расскажет вам, как создать будильник, используя только Javascript и HTML.
1) HTML МАКЕТ
js-alarm-clock.html
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Javascript-будильник</title>
<link href="js-alarm-clock.css" rel="stylesheet">
<script defer src="js-alarm-clock.js"></script>
</head>
<body>
<!-- (A) ТЕКУЩЕЕ ВРЕМЯ -->
<div id="ctime">
<h1 class="header">ТЕКУЩЕЕ ВРЕМЯ</h1>
<div class="square">
<div class="digits" id="chr">00</div>
<div class="text">час</div>
</div>
<div class="square">
<div class="digits" id="cmin">00</div>
<div class="text">Мин</div>
</div>
<div class="square">
<div class="digits" id="csec">00</div>
<div class="text">Сек</div>
</div>
</div>
<!-- (B) УСТАНОВИТЬ БУДИЛЬНИК -->
<div id="tpick">
<h1 class="header">УСТАНОВИТЬ БУДИЛЬНИК</h1>
<div id="tpick-h" class="square"></div>
<div id="tpick-m" class="square"></div>
<div id="tpick-s" class="square"></div>
<input type="button" value="Установить" id="tset">
<input type="button" value="Сбросить" id="treset" disabled>
</div>
</body>
</html>
На первый взгляд HTML может показаться довольно сложным, но будильник состоит всего из двух частей:
A. Справа вверху находятся «часы» для отображения текущего времени в 24-часовом формате HH:MM:SS.
B. Далее у нас есть средство выбора времени для установки будильника. Вы заметите, что селекторы часов, минут и секунд отсутствуют — позже мы создадим их с помощью Javascript.
2) БУДИЛЬНИК CSS
js-alarm-clock.css
#ctime *, #tpick * {
font-family: Impact, sans-serif;
box-sizing: border-box;
text-align: center;
}
#ctime, #tpick, .square { padding: 10px; }
#ctime, #tpick {
margin: 0 auto;
max-width: 350px;
display: flex;
flex-wrap: wrap;
}
.header {
font-weight: normal;
width: 100%;
margin: 10px 0;
}
.square, #tpick-h, #tpick-m, #tpick-s { width: 33%; }
.text, #tset, #treset { margin-top:10px; }
.digits, .square select {
font-size: 24px;
background: #fff;
color: #000;
border: 0;
border-radius: 5px;
width: 100%;
padding: 10px 0;
}
/* (B) ТЕКУЩЕЕ ВРЕМЯ */
#ctime { background: #000; }
#ctime .header { color: #c61d1d; }
#ctime .text { color: #ddd; }
/* (C) ВЫБОР ВРЕМЕНИ */
#tpick { background: #f2f2f2; }
#tset, #treset {
width: 50%;
background: #3368b2;
color: #fff;
border: 0;
padding: 15px 0;
cursor: pointer;
font-size: 18px;
}
#tset:disabled, #treset:disabled {
background: #aaa;
color: #888;
}
Черт. Это выглядит как целое ведро путаницы, но на самом деле это не более чем некоторая косметика. Не стесняйтесь изменять эти стили, чтобы они соответствовали теме вашего собственного проекта.
3) БУДИЛЬНИК JAVASCRIPT
3А) СВОЙСТВА
js-alarm-clock.js
// (A) HTML ЭЛЕМЕНТЫ и СВОЙСТВА
// (A1) ЧАСЫ, МИН, СЕК
chr: null,
cmin: null,
csec: null,
// (A2) ВЫБОР ВРЕМЕНИ ЧАС, МИН, СЕК, УСТАНОВИТЬ, СБРОС
thr: null,
thm: null,
ths: null,
tset: null,
treset: null,
// (A3) ВРЕМЯ БУДИЛЬНИКА И ЗВУК
alarm: null,
sound: null,
В первом разделе let ac мы начинаем с определения множества свойств — выглядит запутанно, но это не что иное, как ссылки на соответствующие элементы HTML.
3) ИНИЦИАЛИЗАЦИЯ
js-alarm-clock.js
init: () => {
// (B1) ПОЛУЧИТЬ HTML ТЕКУЩЕЕ ВРЕМЯ - ЧАС, МИН, СЕКУНД
ac.chr = document.getElementById("chr");
ac.cmin = document.getElementById("cmin");
ac.csec = document.getElementById("csec");
// (B2) СОЗДАТЬ ИНСТРУМЕНТ ВРЕМЕНИ HTML – ЧАСЫ, МИН., СЕК.
ac.thr = ac.createSel(23);
ac.thm = ac.createSel(59);
ac.ths = ac.createSel(59);
document.getElementById("tpick-h").appendChild(ac.thr);
document.getElementById("tpick-m").appendChild(ac.thm);
document.getElementById("tpick-s").appendChild(ac.ths);
// (B3) CREATE HTML TIME PICKER - SET, RESET
ac.tset = document.getElementById("tset");
ac.treset = document.getElementById("treset");
ac.tset.onclick = ac.set;
ac.treset.onclick = ac.reset;
// (B4) СИГНАЛ БУДИЛЬНИКА
ac.sound = new Audio("wake-up-sound.mp3");
// (B5) НАЧАТЬ ЧАСЫ
ac.alarm = null;
setInterval(ac.tick, 1000);
},
// (C) ФУНКЦИЯ ПОДДЕРЖКИ - СОЗДАТЬ СЕЛЕКТОР ДЛЯ ЧАСОВ, МИН, СЕК
createSel: max => {
let selector = document.createElement("select"), opt;
for (let i=0; i<=max; i++) {
opt = document.createElement("option");
i = ac.padzero(i);
opt.value = i;
opt.innerHTML = i;
selector.appendChild(opt);
}
return selector;
},
// (D) ФУНКЦИЯ ПОДДЕРЖКИ - ПРЕДВАРИТЕЛЬНАЯ ПОДДЕРЖКА ЧАСОВ, МИН, СЕК С 0 (ЕСЛИ < 10)
padzero: num => {
if (num < 10) { num = "0" + num; }
else { num = num.toString(); }
return num;
},
// (E) ОБНОВИТЬ ТЕКУЩЕЕ ВРЕМЯ
tick: () => {
// (E1) ТЕКУЩЕЕ ВРЕМЯ
let now = new Date(),
hr = ac.padzero(now.getHours()),
min = ac.padzero(now.getMinutes()),
sec = ac.padzero(now.getSeconds());
// (E2) ОБНОВИТЬ ЧАСЫ HTML
ac.chr.innerHTML = hr;
ac.cmin.innerHTML = min;
ac.csec.innerHTML = sec;
// (E3) ПРОВЕРКА И ЗВУКОВАЯ СИГНАЛИЗАЦИЯ
if (ac.alarm != null) {
now = hr + min + sec;
if (now == ac.alarm && ac.sound.paused) { ac.sound.play(); }
}
},
ac.tick()запускается по интервальному таймеру каждую секунду для обновления HTML и при необходимости подает сигнал.
3D) НАСТРОЙКА И СБРОС
js-alarm-clock.js
set: () => {
ac.alarm = ac.thr.value + ac.thm.value + ac.ths.value;
ac.thr.disabled = true;
ac.thm.disabled = true;
ac.ths.disabled = true;
ac.tset.disabled = true;
ac.treset.disabled = false;
},
// (G) СБРОС БУДИЛЬНИКА
reset: () => {
if (!ac.sound.paused) { ac.sound.pause(); }
ac.alarm = null;
ac.thr.disabled = false;
ac.thm.disabled = false;
ac.ths.disabled = false;
ac.tset.disabled = false;
ac.treset.disabled = true;
}
};
// (H) ЗАПУСК ЧАСОВ ПРИ ЗАГРУЗКЕ СТРАНИЦЫ
window.addEventListener("load", ac.init);
ac.init()будет работать при загрузке страницы.
Готовый пример вы можете скачать или посмотреть.
Посмотреть
Скачать
