Как сделать часы в html

Обновлено: 07.07.2024

Для того, чтобы посетители и пользователи Вашего сайта могли наблюдать текущую дату и время, воспользуйтесь нашим простым JavaScript кодом, приведенным чуть ниже. Для этого необходимо сначала на JavaScript описать в начале Вашей странички функцию генерирования текущего времени и даты clock() следующим образом:

script type = "text/javascript" >
function clock () var d = new Date ();
var month_num = d . getMonth ()
var day = d . getDate ();
var hours = d . getHours ();
var minutes = d . getMinutes ();
var seconds = d . getSeconds ();

month =new Array( "января" , "февраля" , "марта" , "апреля" , "мая" , "июня" ,
"июля" , "августа" , "сентября" , "октября" , "ноября" , "декабря" );

if ( day 9 ) day = "0" + day ;
if ( hours 9 ) hours = "0" + hours ;
if ( minutes 9 ) minutes = "0" + minutes ;
if ( seconds 9 ) seconds = "0" + seconds ;

date_time = "Сегодня - " + day + " " + month [ month_num ] + " " + d . getFullYear () +
" г. Текущее время - " + hours + ":" + minutes + ":" + seconds ;
if ( document . layers ) document . layers . doc_time . document . write ( date_time );
document . layers . doc_time . document . close ();
>
else document . getElementById ( "doc_time" ). innerHTML = date_time ;
setTimeout ( "clock()" , 1000 );
>

Далее в заданном месте Вашей странички (там, где будет выводиться дата и время) необходимо добавить следующий HTML код:

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

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

Если Вам необходимо показывать статичное время (время, когда была сгенерирована странички), то рекомендуем Вам воспользоваться скриптом попроще, приведенным в теме Простой PHP скрипт, отображающий текущую дату и время.

Время пришло. В этой статье мы попробуем решить задачу по созданию и анимированию настенных часов, используя простые CSS-анимации и JavaScript для их запуска.

Перед вами часы, которые мы создадим с помощью HTML, CSS, SVG-фона и небольшого количества JavaScript. Мы будем использовать CSS-анимации или переходы для любых типов движений, а с помощью JavaScript мы будем задавать исходное время и добавим базовые CSS-трансформации.

Для начала нам понадобится немного HTML.

Изначально я хотел использовать три элемента (по одному для каждой из стрелок). Но затем передумал и поместил каждую стрелку в элемент-контейнер. Несмотря на то, что более простой HTML-код подошел бы для базовых CSS-анимаций, элементы-контейнеры понадобятся нам, если мы захотим анимировать и устанавливать положение стрелок.

Циферблат

Начнем с обычных часов с круглым циферблатом и простыми стрелками (часовой, минутной и секундной).

Вы можете скачать SVG-фон здесь. Кроме того, я добавил к нему псевдоэлемент для создания в центре сплошной черной окружности. После этого мы можем расположить стрелки за этим псевдоэлементом так, как нам будет необходимо.

В результате у нас должно получиться что-то вроде этого.

Перед добавлением стрелок нам нужно расположить контейнеры.

Таким образом мы расположим каждый из контейнеров над циферблатом. После этого мы создадим стрелки.

Часовая стрелка

Я использую значения в процентах, чтобы упростить задачу масштабирования часов. Для этого нужно потратить немного больше сил, но зато результат всегда легко подогнать под размеры области просмотра или уменьшить под экраны мобильных устройств. Мы также переносим точку вращения стрелки в нижнюю часть с помощью свойства transform-origin , что позволит нам поворачивать стрелку.

Минутная стрелка

Минутная стрелка похожа на часовую, но она длиннее и тоньше.

Секундная стрелка

Секундная стрелка еще тоньше. Кроме того, она находится ниже, выходя за пределы центра. Для этого мы задаем свойству transform-origin значение 80%. Теперь 20% стрелки выходят за пределы центра.

Анимация

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

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

Мы можем задать один ключевой кадр с помощью свойства keyframes , чтобы заставить стрелки выполнять оборот в 360 градусов (их начальное положение при этом принимается за 0%).

Этот ключевой кадр сообщает элементу, что тот должен выполнить анимацию поворота на 360 градусов, если кадр был применен к элементу с помощью свойства animation . Мы применим к стрелкам временную функцию типа linear (линейная), чтобы заставить их двигаться плавно.

Часовая стрелка hours установлена на выполнение полного оборота за 12 часов (43 200 секунд). Минутная стрелка делает один оборот за час, а секундная — за одну минуту.

Соберем все вместе, и у нас готова анимация движения!

Если у вас очень острое зрение, то вы даже можете заметить, как движется минутная стрелка. Для полного оборота ей понадобится час, а часовой стрелке для полного оборота понадобится 12 часов.

Секундная стрелка делает оборот за 60 секунд, поэтому ее движение заметить проще.

Добавление "шагов"

Чтобы движение наших стрелок больше напоминало настоящие часы, мы можем заставить секундную стрелку делать полный оборот за 60 отдельных движений. Сделать это просто. Используем временную функцию steps (шаги). В этом случае свойство animation для каждой из стрелок будет выглядеть следующим образом:

Теперь и минутная, и секундная стрелки выполняют полный оборот за 60 шагов. Браузер автоматически рассчитывает, насколько большим должен быть каждый из этих 60 шагов.

Установка правильного времени

Конечно, здорово, когда часы выглядят симпатично, но как заставить их показывать правильное время? Добавив немного JavaScript, мы можем показывать нашим пользователям корректное время. Вот нужный нам код.

Данная функция преобразует время (часы, минуты и секунды) в соответствующий угол для каждой из стрелок. После этого мы в цикле устанавливаем каждой из стрелок нужную величину угла с помощью свойства style.transform со значением rotateZ .

Этот подход сработает в большинстве браузеров, кроме Сафари и тех браузеров, которые требуют использования браузерных префиксов. Для их поддержки мы используем свойство style.webkitTransform .

Таким образом мы устанавливаем часам текущее системное время.

Установка положения секундной и минутной стрелок

Нам нужно убедиться, что движение минутной стрелки происходит, когда секундная стрелка проходит отметку "12 часов".

Когда часы впервые отрисовываются на экране, время до следующего движения минутной стрелки меньше одной минуты. Для решения этой задачи мы можем рассчитать, сколько секунд осталось до конца этой минуты, и вручную передвинуть стрелку. Раз уж мы использовали JavaScript для первого движения стрелки, мы можем и дальше поворачивать ее на шесть градусов каждую минуту с помощью метода setInterval .

Перед тем, как мы передвинем минутную стрелку, нам нужно сообщить, сколько прошло секунд с начала текущей минуты. Вы могли обратить внимание на эти строки.

Добавление отскока

Поскольку для перемещения минутной стрелки мы теперь используем JavaScript, нам следует убрать свойство 'animation'. Вместо того, чтобы просто его удалить, мы можем заменить его на 'transition'. Это позволит нам добавить в анимацию немного оригинальности.

В момент установки стрелке нового угла с помощью JavaScript, CSS-переход элемента будет заставлять браузер анимировать его новое положение. Это значит, что JavaScript будет заниматься лишь простым изменением угла, а браузер займется его анимацией.

Перед тем как сделать это, нам нужно усовершенствовать код, чтобы начать использовать JavaScript и для перемещения секундной стрелки. Давайте используем этот код для анимации контейнера секундной стрелки 60 раз в минуту.

Теперь, когда секундной и минутной стрелкой занимается JavaScript, обновим CSS, заменив свойства animation на transition .

Эти переходы будут применяться к свойству transform и в них используется временная функция cubic-bezier (кубическая-Безье). Эта временная функция добавляет стрелке небольшой отскок.

Часы в стиле iOS 7

Я большой поклонник минимализма часов, использованных в iOS 7 у Apple. С тех пор они увеличили длину стрелок, но мне нравится более короткая версия.

Задав стиль стрелкам и добавив фон с цифрами, мы можем с легкостью воссоздать этот образ.

Сам по себе этот дизайн является эволюцией Швейцарских железнодорожных часов Ганса Хильфикера. Немного изменив стиль и добавив новое фоновое изображение, мы можем адаптировать наши часы под этот стиль.

Если вы придумаете другие варианты, дайте мне знать.

Использование Moment.js

Одной из идей, появившихся, когда я решил написать этот пост, было воссоздание образа часов в отеле, когда трое часов показывают разные временные пояса.

Самым простым способом настроить часы на разные временные пояса является использование великолепной библиотеки Moment.js Timezone .

Работу этого кода вы можете увидеть на Codepen.

Поддержка браузерами

Современные браузеры умеют работать с использованными в этой статье CSS-переходами и анимациями. IE10+, последние версии Chrome и Firefox поддерживают их без префиксов, а Safari требует префикса -webkit .

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

17.03.2012 по 2Web 3 026

Сегодня вы узнаете (и сможете скачать исходники) о том, как создать симпатичные аналоговые часы с помощью HTML5.

Ok, качаем исходники и смотрим, как они работают!

Шаг 1. HTML

Сначала идет разметка часов.

index.html

a href = "http://www.script-tutorials.com/html5-clocks/" class = "stuts" > Back to original tutorial on span > Script Tutorials / span > / a >

Шаг 2. CSS

Далее все необходимые стили.

css/main.css

Шаг 3. JS

js/script.js

Сначала определяем основной таймер для отрисовки сцены. Далее с каждым шагом (тиком) скрипт определяет текущее время и отрисовывает стрелки часов (сами стрелки часов, минут и секунд).

Выводы

Надеемся сегодняшние часы на HTML5 были для вас впечатляющими. Если вам нужны такие часы в виде плагина для WordPress, оставляйте свои заявки в комментариях. Если будут желающие, такой плагин сделаем, и он будет абсолютно бесплатен. Удачи!

Читайте также: