Создаем цифровые часы на JavaScript
Из этого руководства вы узнаете, как с помощью JavaScript создать цифровые часы, показывающие время в 24 и 12-часовом форматах.
Цифровые часы в 24-часовом формате
Структура
Создадим элемент div с атрибутом id =“clock”, в котором будет отображаться время с помощью JavaScript.
HTML
<div id="clock"></div>Стили
Для текста можно установить размер шрифта и цвет. В качестве шрифта выберем Orbitron. Время будет отображаться на черном фоне.
CSS
/* Google font */
@import url('https://fonts.googleapis.com/css?family=Orbitron');
body {
background-color: #121212;
}
#clock {
font-family: 'Orbitron', sans-serif;
color: #66ff99;
font-size: 56px;
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
}Скрипт
Весь код часов основан на функции currentTime(). Внутри функции создается объект класса Date, который используется для получения текущего часа, минут и секунд. Их значения сохраняются в разных переменных.
JavaScript
function currentTime() {
var date = new Date(); /* создание экземпляра объекта класса Date ()*/
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
}Чтобы элементы времени всегда отображались в двузначном формате, перед ними ставится 0 всякий раз, когда они меньше 10. Для этого используется метод updateTime() .
JavaScript
function currentTime() {
hour = updateTime(hour);
min = updateTime(min);
sec = updateTime(sec);
}
function updateTime(k) {
if (k < 10) {
return "0" + k;
}
else {
return k;
}
}Теперь отобразим текущее время в элементе div. Для этого используется метод document.getElementById и свойство innerHTML.
JavaScript
document.getElementById("clock").innerHTML = hour + " : " + min + " : " + sec; /* adding time to the div */Чтобы запустить таймер, применим метод setTimeout(). В качестве аргументов он принимает функцию currentTime() в качестве первого аргумента и временя (в миллисекундах). В нашем случае функция вызывается каждые 1000 миллисекунд.
Наконец, функция currentTime() вызывается для запуска всего процесса.
JavaScript
function currentTime() {
var t = setTimeout(function(){ currentTime() }, 1000); /* настаиваем таймер */
}
currentTime(); /* Вызываем функция currentTime(), которая запускает весь процесс*/Мы только что создали цифровые часы.
Цифровые часы в 12-часовом формате
Для часов с 12-часовым форматом времени HTML и CSS остаются такими же, как и в предыдущем случае.
Структура
Создаем блок div для отображения времени.
HTML
<div id="clock"></div>Стиль
Стиль часов тоже не меняется.
CSS
/* Google font */
@import url('https://fonts.googleapis.com/css?family=Orbitron');
body {
background-color: #121212;
}
#clock {
font-family: 'Orbitron', sans-serif;
color: #66ff99;
font-size: 56px;
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
}Скрипт
JavaScript-код для цифровых часов показан ниже.
JavaScript
function currentTime() {
var date = new Date(); /* создаем объект класса Date() */
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
hour = updateTime(hour);
min = updateTime(min);
sec = updateTime(sec);
document.getElementById("clock").innerText = hour + " : " + min + " : " + sec; /* adding time to the div */
var t = setTimeout(function(){ currentTime() }, 1000); /* настраиваем таймер */
}
function updateTime(k) {
if (k < 10) {
return "0" + k;
}
else {
return k;
}
}
currentTime(); /* вызываем функцию currentTime() */Нам необходимо добавить еще три строки кода и наши часы будут готовы. Создаем переменную и присваиваем ей начальное значение «AM». Эта переменная будет использоваться для хранения значения «AM» или «PM». Для присвоения переменной midday значения «PM» используется тернарный оператор.
JavaScript
function currentTime() {
var midday = "AM";
midday = (hour >= 12) ? "PM" : "AM";
}Чтобы отображать время в 12-часовом формате, количество часов не должно превышать двенадцать. Поэтому если оно больше, то 12 вычитается из количества часов. Кроме этого, количество часов меняется на 12.
JavaScript
function currentTime() {
hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour);
}