Годинник на JavaScript

37

Від автора: вітаю вас, друзі. Ми з вами вже вміємо маніпулювати елементами на сторінці: вибирати, додавати, змінювати і видаляти елементи. Тепер давайте спробуємо вирішити одну з найпопулярніших в минулому завдань — створимо найпростіші годинник на JavaScript.

Для того, щоб реалізувати задумане, нам потрібно познайомитися з однією цікавою функцією JavaScript — це функція setInterval. Функція приймає два параметри. Перший параметр — якийсь код або функцію, яку необхідно виконати. Другий параметр — затримка в мілісекундах, з якою необхідно виконувати код з першого параметра.

Власне, це якраз те, що нам потрібно. Перший параметр — це функція, яка буде отримувати поточний час (години, хвилини і секунди), а другий параметр буде викликати цю функцію разів в секунду (1000 мілісекунд), тим самим оновлюючи наші годинники щомиті. Найпростіший приклад:

function hello(){
console.log(‘hello’);
}
setInterval(hello, 1000);

Тепер функція hello() буде викликатися кожну секунду, кожну секунду в консолі буде дублюватися рядок hello:

Часы на JavaScript

Як бачимо на скріншоті вище, функція була викликана вже 5 разів. Ідея, думаю, зрозуміла. Замість щосекундного виклику функції ви можете використовувати інший інтервал. Тепер давайте набросаєм функцію clock(), яка буде отримувати елементи годин: години, хвилини і секунди. Ну і будемо викликати написану функцію за допомогою setInterval:

function clock(){
var date = new Date(),
hours = (date.getHours() < 10) ? ‘0’ + date.getHours() : date.getHours(),
minutes = (date.getMinutes() < 10) ? ‘0’ + date.getMinutes() : date.getMinutes(),
seconds = (date.getSeconds() < 10) ? ‘0’ + date.getSeconds() : date.getSeconds();
console.log(hours + ‘:’ + minutes + ‘:’ + seconds);
}
setInterval(clock, 1000);

Тепер раз у секунду ми бачимо в консолі актуальне час.

Часы на JavaScript

Ну що ж, залишилося замість консолі виводити час в який-небудь елемент документа. Ми можемо створити програмно цей елемент, але у випадку з годинником та іншими таймерами прийнято використовувати вже наявний елемент верстки. Отже, нехай у нас буде div id clock:

Ну та код JavaScript, який додає години в порожній div:

function clock(){
var date = new Date(),
hours = (date.getHours() < 10) ? ‘0’ + date.getHours() : date.getHours(),
minutes = (date.getMinutes() < 10) ? ‘0’ + date.getMinutes() : date.getMinutes(),
seconds = (date.getSeconds() < 10) ? ‘0’ + date.getSeconds() : date.getSeconds();
document.getElementById(‘clock’).innerHTML = hours + ‘:’ + minutes + ‘:’ + seconds;
}
setInterval(clock, 1000);

Тепер на сторінці ми отримаємо простенькі, але цілком працюють годинник, раніше такі можна було зустріти чи не на кожному другому сайті:

Часы на JavaScript

До речі, якщо ви звернули увагу, то при оновленні сторінки ми деякий час не бачимо годин. Це так, оскільки функція setInterval спрацює тільки через секунду і, відповідно, функція clock буде викликана тільки через секунду. Для того, щоб побачити годинник відразу, досить викликати функцію clock самостійно:

function clock(){
var date = new Date(),
hours = (date.getHours() < 10) ? ‘0’ + date.getHours() : date.getHours(),
minutes = (date.getMinutes() < 10) ? ‘0’ + date.getMinutes() : date.getMinutes(),
seconds = (date.getSeconds() < 10) ? ‘0’ + date.getSeconds() : date.getSeconds();
document.getElementById(‘clock’).innerHTML = hours + ‘:’ + minutes + ‘:’ + seconds;
}
setInterval(clock, 1000);
clock();

Ось тепер все працює як треба. На цьому ми завершимо створення найпростіших годин на JavaScript. Якщо ви хочете більше дізнатися про JavaScript, тоді рекомендую звернути свою увагу на уроки по JavaScript і окремий курс по мові JavaScript. Удачі!