Часы на JavaScript

Часы на JavaScript

От автора: приветствую вас, друзья. Мы с вами уже умеем манипулировать элементами на странице: выбирать, добавлять, изменять и удалять элементы. Теперь давайте попробуем решить одну из популярнейших в прошлом задач — создадим простейшие часы на 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 с идентификатором clock:

<div id="clock"></div>

Ну и код 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. Удачи!

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree