Создаем цифровые часы на 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);
}