От автора: приветствую вас, друзья. Мы с вами уже умеем манипулировать элементами на странице: выбирать, добавлять, изменять и удалять элементы. Теперь давайте попробуем решить одну из популярнейших в прошлом задач — создадим простейшие часы на JavaScript.
Для того, чтобы реализовать задуманное, нам нужно познакомиться с одной интересной функцией JavaScript — это функция setInterval. Функция принимает два параметра. Первый параметр — некий код или функция, которую необходимо выполнить. Второй параметр — задержка в миллисекундах, с которой необходимо выполнять код из первого параметра.
Собственно, это как раз то, что нам нужно. Первый параметр — это функция, которая будет получать текущее время (часы, минуты и секунды), а второй параметр будет вызывать эту функцию раз в секунду (1000 миллисекунд), тем самым обновляя наши часы ежесекундно. Простейший пример:
|
1 2 3 4 |
function hello(){ console.log('hello'); } setInterval(hello, 1000); |
Теперь функция hello() будет вызываться каждую секунду, и каждую секунду в консоли будет дублироваться строка hello:
Как видим на скриншоте выше, функция была вызвана уже 5 раз. Идея, думаю, понятна. Вместо ежесекундного вызова функции вы можете использовать другой интервал. Теперь давайте набросаем функцию clock(), которая будет получать элементы часов: часы, минуты и секунды. Ну и будем вызывать написанную функцию с помощью setInterval:
|
1 2 3 4 5 6 7 8 |
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); |
Теперь раз в секунду мы видим в консоли актуальное время.
Ну что же, осталось вместо консоли выводить время в какой-нибудь элемент документа. Мы можем создать программно этот элемент, но в случае с часами и прочими таймерами принято использовать уже имеющийся элемент верстки. Итак, пусть у нас будет div с идентификатором clock:
|
1 |
<div id="clock"></div> |
Ну и код JavaScript, добавляющий часы в пустой div:
|
1 2 3 4 5 6 7 8 |
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); |
Теперь на странице мы получим простенькие, но вполне работающие часы, раньше такие можно было встретить чуть ли не на каждом втором сайте:
К слову, если вы обратили внимание, то при обновлении страницы мы некоторое время не видим часов. Это так, поскольку функция setInterval сработает только через секунду и, соответственно, функция clock будет вызвана только через секунду. Для того, чтобы увидеть часы сразу, достаточно вызвать функцию clock самостоятельно:
|
1 2 3 4 5 6 7 8 9 |
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. Удачи!
