Как создать часы для сайта с помощью JavaScript | RUDEBOXВ данном уроке мы рассмотрим как создать часы для сайта с эффектом переворота и со звуковым сопровождением, что добавит часам большего реализма. В данной публикации мы рассмотрим два варианта часов, первый вариант-это обычные часы, а во втором варианте можно добавить еще и дату, что будет отлично сочетаться. Плюс таких часов в том, что они синхронизируются с вашим временем, и будь то вы на Украине или в России часы вам укажут правильное время. Для данной реализации мы будем использовать библиотеку скриптов Zepto.

 

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

Zepto.js-это альтернатива jQuery, разработчики данного скрипта стараются добиться максимальной эффективности при малом объеме скрипта, не засоряя его мусором кроссбраузерности как это реализовано в jQuery. Данный скрипт можно найти в исходниках.

Шаг 1. HTML

Для того чтобы вывести часы в разметку, нам достаточно указать div с контейнером:

Не стоит забывать, что нам необходимо подключить библиотеку Zepto, при этом указать правильный путь к ней.

Как создать часы для сайта с помощью JavaScript RUDEBOX

Шаг 2. CSS

Мы не будем использовать изображений, чтобы максимально упростить часы. Для начала нам необходимо установить общие параметры контейнера, задать абсолютное позиционирование, и определить стили фона для часов.

Для придания часам стиля мы добавим параметры для теней:

Необходимо указать стили для таблички когда она будет переворачиваться:

Со стилями разобрались, переходим к следующему шагу.

Шаг 3. JavaScript

Нам необходимо вычислить текущее время, кроме этого задать его отображение в правильной форме, обратите внимание, в самом конце нам необходимо указать желаемую команду, будет то просто часы, или часы с календарем, команды можно просмотреть в демонстрации:

Кроме этого была добавлена функция звукового сопровождения, при перевороте плитки.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.