Как вставить часы на сайт

и в нужном месте страницы разместить

Похожие статьи

• Озвучка часов
• Часы и минуты перевести в минуты
• Вызвать окно с системными часами
• Часы на JavaScript

Часы на Javascript для сайта

Несколько примеров реализации часов на Javascript для сайта. Простые цифровые часы , часы с секундами и миллисекундами , круглые часы со стрелками .

Самый простой способ реализации часов на JavaScript.

#clock

window.onload = function()< window.setInterval(function()< var now = new Date(); var clock = document.getElementById("clock"); clock.innerHTML = now.toLocaleTimeString(); >,1000); >;

Можно так (Javascript):

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();

See the Pen GgpgNd by DG Templates (@dgtemplates) on CodePen.

С текущей датой и днём недели:

Дата и время в HTML. Формат, текущее время, часы на сайте

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

Указание даты и времени для ивента (например, "концерт Alan Walker в Москве 25 февраля в 19:00") в микроразметке, обозначение точки отсчета для скриптов на странице, улучшенное понимание даты и времени указанного в контенте страницы поисковой системой (например, с помощью тега ) - для этих целей нужно использовать формат времени HTML.

Для человека будет достаточно написать "сегодня в 10", "через 3 дня", в "прошлом году", но для "машины" такая запись далеко не всегда будет информативной. Формат даты и времени в HTML позволяет описывать выражения подобные этим, а также указывать не только временные точки, но и временные отрезки, например "длительность 2 часа 17 минут".

Рассмотрим как правильно писать дату и время в HTML.

Формат точной даты и времени YYYY-MM-DDThh:mm:ssTZD

Этот формат используется для указания конкретной временной точки ("20-го апреля", "сегодня в 8 утра", "15 января 2001 года").

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

Расшифровка формата YYYY-MM-DDThh:mm:ssTZD:

• YYYY - год, 4 цифры;
• MM - месяц, 2 цифры;
• DD - число, 2 цифры;
• T - разделитель даты и времени, вместо "T" можно использовать пробел;
• hh - часы, 2 цифры, используется 24-часовой формат времени;
• mm - минуты, 2 цифры;
• ss - секунды, 2 цифры;
• TZD - временная зона, например: "+03:00". Формат временной зоны: +hh:mm, либо -hh:mm.

Также можно указать неделю в году в формате YYYY-WW. WW - номер недели, 2 цифры.

Рассмотрим примеры вывода даты и времени в формате временной точки.

Формат периода времени (длительность)

Формат PWDTHMS используется когда нужно указать не конкретную точку, а период времени: "3 дня", "2 часа 5 минут" и т.п. То есть, когда нужно показать длительность.

Длительность периода считается в секундах. Если указана другая величина, время приводится к секундам путем умножения:
2 минуты = 2*60 = 120 секунд и т.п.

Расшифровка формата PWDTHMS:

P - префикс периода;

W - суффикс для количества недель (604800 секунд);

D - суффикс для количества дней (86400 секунд);

T - префикс времени;

H - суффикс для количества часов (3600 секунд);

M - суффикс для количества минут (60 секунд);

S - суффикс для количества секунд;

Примеры указания периода времени:

Как вставить текущее время в HTML

Вывести на страницу сайта текущее время используя только лишь HTML не получится.

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

За вывод даты и времени в JavaScript отвечает объект типа Date() .

Попробуем вывести текущую дату и время на экран с помощью встроенного скрипта:

 
document.write(Date()); 

Как видим, выводится вся информация о дате и времени.

Дата и время в HTML в привычном формате

Если мы хотим вывести дату и время в более привычном формате, можем воспользоваться функциями getFullYear() , getMonth() , getDate() , getHours() , getMinutes() , getSeconds() .

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

Также обратите внимание на то, что функция getMonth() возвращает значение от 0 до 11 (количество полных месяцев, прошедших от начала года до указанной даты), а не порядковый номер месяца от 1 до 12. Поэтому, чтобы получить календарный номер месяца нужно к результату функции прибавить единицу.

Вставить текущее время и дату в HTML в привычном формате можно с помощью следующего кода:

 

 
 
/* функция добавления ведущих нулей */ 
/* (если число меньше десяти, перед числом добавляем ноль) */ 
function zero_first_format(value) 
 if (value < 10)
 value='0'+value; 
> 
return value; 
>
 
/* функция получения текущей даты и времени */ 
function date_time() 
 var current_datetime = new Date(); 
var day = zero_first_format(current_datetime.getDate()); 
var month = zero_first_format(current_datetime.getMonth()+1); 
var year = current_datetime.getFullYear(); 
var hours = zero_first_format(current_datetime.getHours()); 
var minutes = zero_first_format(current_datetime.getMinutes()); 
var seconds = zero_first_format(current_datetime.getSeconds());
 
return day+"."+month+"."+year+" "+hours+":"+minutes+":"+seconds; 
>
 
/* выводим текущую дату и время на сайт в блок с id "current_date_time_block" */ 
document.getElementById('current_date_time_block').innerHTML = date_time(); 

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

Часы на сайт, обновляемые в реальном времени

Если мы хотим, чтобы пользователь всегда видел актуальное время, то есть хотим сделать часы на странице, нужно реализовать обновление времени один раз в секунду (либо в минуту, если вы не выводите секунды). Для этого воспользуемся интервалом в JavaScript.

 

 
 
/* каждую секунду получаем текущую дату и время */ 
/* и вставляем значение в блок с id "current_date_time_block2" */ 
setInterval(function () document.getElementById('current_date_time_block2').innerHTML = date_time(); 
>, 1000); 

Изменить формат даты и времени, выводимый в HTML код страницы, вы можете, комбинируя функции объекта Date() . Все они описаны в справочнике по JavaScript.

by Lebedev

Оцените, насколько полезна эта страница
Эти материалы могут быть вам полезны
Комментарии
14 декабря 2019 г.
Привет. На сайте показывается дата на месяц назад.
вместо 12 (декабрь) показывает 11 (ноябрь)
14 декабря 2019 г.
Денис, спасибо за внимательность! Действительно в примере показывало на единицу меньше, исправил.
14 декабря 2019 г.

Здравствуйте.
Где-то копировал сценарий такой-же небольшой, подобный(!) этому (ниже)
_______________________________________

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

15 декабря 2019 г.

Не реализовать, а отыскать уже реализованный сценарий.
В котором время берётся не с сервера, где он в страницу вписан, тем паче не с клиента. А напрямую с вписанного url сервера времени.
Тестировал страницу на своём "клиентском", разница с локальными часами величины расхождения в синхронизации на каждом из 3х серверов (time.windows.com , time.nist.gov , timeserver.ru) была заметна.
Дело не в "доверяете-или-нет", а в том, что не абсолютно все клиентские пк настроемы на автосинхронизацию.

30 июня 2020 г.

Если честно ничего не понял, покопипастил, понял что это не совсем то что я ищу.Я знаю относительно нормально CSS, HTML .. В JS ничего не понимаю, но ситуция такая, нужно время которое не ориентируется на время моего компьютера, сервера или еще чего. Которое я смогу один раз сам настроить и оно будет идти своим 24м поясом, плюс ко всему нужно что-то вроде оповещений спустя определенное время.Oни повторяются каждые 24 часа. Вопрос такой можно ли подобную схему реализовать через JS ?

08 июля 2020 г.

Кирилл, если я правильно вас понял, вы хотите сделать настраиваемые через JS скрипт часы.

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

Например, вы знаете, что время компьютера 08:40, вам нужно, 09:52. Значит нужно прибавить к времени компьютера 1 час 12 минут (либо 72 минуты).

Установка компонентов времени осуществляется с помощью специальных функций:
setHours(количество часов) - установка значения часов;
setMinutes(количество минут) - установка значения минут;
setSeconds(количество секунд) - установка значения секунд.

Не буду копировать весь код, приведу только изменения:
В функции date_time() из примера со статьи после строки
var current_datetime = new Date();
нужно добавить:
current_datetime.setMinutes(current_datetime.getMinutes() + 12);
current_datetime.setHours(current_datetime.getHours() + 1);

Таким образом, каждый раз при обращении к функции date_time() будет выводиться время, скорректированное на указанное вами количество часов и минут (1 час и 12 минут в примере выше).

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

Что касается уведомлений - это также можно реализовать через JS. Информация по формированию уведомлений есть в JS справочниках.

01 июля 2020 г.

Привет. Интересует тот момент, где фиксируется время захода на сайт (и потом НЕ обновляется). Если нужно в чате фиксировать время на каждое сообщение, как это сделать? То есть чтобы время фиксировалось не на момент загрузки страницы, а на момент появления сообщения в чате. Возможно?

08 июля 2020 г.

Алекс, да, возможно.

При создании экземпляра Date() в нем содержится время на момент его создания.

Все, что вам нужно сделать - это создать и сохранить экземпляр Date() в момент появления сообщения:

var message_datetime = new Date();

Добавьте эту строку в функцию вывода нового сообщения и тогда для каждого сообщения будет фиксироваться время появления этого сообщения. Только не забудьте описать вывод message_datetime в нужном вам месте.

26 июля 2020 г.

Благодарю за инфо. Но вообще я полный профан в этом деле и иду по пути наименьшего сопротивления. ) У меня как бы чат-бот, если можно так сказать, а не реальное общение.
Для появления сообщения служит простейший скрипт:

Соответственно на странице сообщения размещается:
сообщение

Можно к этому как-то пришить вышесказанное?
Если долго объяснять и это очень муторно для вас, то можно оставить без ответа. )

26 июля 2020 г.

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

26 июля 2020 г.

А если несколько сообщений, то будет выглядеть так?

26 июля 2020 г.
Да, похоже что так. Но, чего спрашиваете, тестируйте! 🙂
09 декабря 2022 г.
как установить время на сайт на пайтон не подскажете
11 декабря 2022 г.

Абрахам, приведенный в статье код выполняется на стороне клиента (так как реализован на JavaScript), поэтому он подойдет и для сайта c бэкендом Python.

26 июля 2020 г.
Понял, спасибо огромное!
27 июля 2020 г.
Здравствуйте! Всё сработало кроме кода для показа реального времени. Подскажите что надо сделать
28 июля 2020 г.

Добрый день. Весь приведенный код рабочий. Вы можете протестировать его, например, через "редактор кода онлайн" на этом сайте.

Там нет ничего сложного, достаточно скопировать нужные участки кода.

Если делаете часы реального времени, не забудьте, помимо основного блока кода, скопировать функцию date_time и zero_first_format из блока выше, либо полностью вышестоящий блок.

28 июля 2020 г.
спасибо большое
20 января 2021 г.

Пожалуйста если не сложно. Дайте готовый код полный чтобы в реальном времени только выходило. У меня не получается. Выходят оба варианта.

20 января 2021 г.

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

09 ноября 2020 г.
Спасибо большое!
03 февраля 2021 г.

Всем привет!
Спасибо, отличная статья!
А если перед мной стоит задача вывести в блок цифру обозначающую разницу между 2011 годом и 2021.Тоесть чтобы в 2021 выводилась цифра 10, но если пользователь зайдёт уже 2022 то цифра изменилась на 11 в моем спане. Я так понимаю необходимо сделать счётчик? Помогите пожалуйста

03 февраля 2021 г.

Зачем же усложнять. 2011 - это число. Функция getFullYear() также вернет вам число. Просто отнимаем одно от другого и получаем разницу:

14 марта 2021 г.

как правильно указать через этот тег период времени - как график работы: с 6:00 АМ до 10:00 РМ и дни недели Понедельник-Суббота??
06:00 AM - 10:00 PM
так.

14 марта 2021 г.

С помощью одного тега вы можете указать одну временную точку (например, 14 марта 2021 года, 14:00) или один период времени (например, 4 дня 2 часа 45 минут 10 секунд). График работы включает в себя две временные точки, соответственно, на каждую из них используйте отдельный тег time.

15 марта 2021 г.

Это 2 тега тайм и + их надо будет чем-то обворачивать и раздвигать в одной строке? Проще конечно через

15 марта 2021 г.

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

25 марта 2021 г.
Вопрос перенесен в раздел "Вопросы по веб-разработке".
11 апреля 2021 г.
Как сделать чтобы всем показывалось серверное время, а не время у клиента?
13 апреля 2021 г.

Для того чтобы вывести серверное время, нужно, собственно, получить его у сервера. Как это реализовать зависит от типа сервера, который вы используете. Для php, например, можно использовать функцию time() для получения текущей метки системного времени Unix и функцию date() для форматирования полученного значения:
echo('

'); - этот код выведет блок с текущим серверным временем в формате ::.

27 апреля 2021 г.

Подскажите как сделать так, чтоб дата и время были в описанном выше формате ДД-ММ-ГГГГ ЧЧ-ММ-ММ. При нажатии кнопки время фиксировалось и оставалось таким как было при клике на кнопку?

27 апреля 2021 г.

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

Вывести текущее время

28 апреля 2021 г.
Разобралась! Спасибо
07 мая 2021 г.

Добрый день!
Подскажите пожалуйста, у меня есть поле даты заполняемое руками пользователем.
input name="duedate" type="text" value=" YYYY-MM-DD"
как передать date_time(); в это поле?
используя пример выше?
спасибо большое

08 мая 2021 г.

Юрий, если хотите реализовать это именно так, как вы написали, то:
document.getElementById('duedate').value = date_time();

11 мая 2021 г.
А есть еще варианты ? Буду благодарен за подсказку
данный параметр передается через POST запрос.
14 мая 2021 г.

Юрий, чтобы понять какой метод вам подойдет, нужно подробное описание того, что вы пытаетесь реализовать. Может быть вам и не нужно иcпользовать JavaScript вообще и будет достаточно заполнить поле с помощью php функции date() при формировании страницы с формой.

Если есть желание, можете описать свою ситуацию подробно в разделе "Ответы на Ваши вопросы".

14 июля 2021 г.

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

Мы стартуем 12 июля 2021

Приходит время на 12 июля и дата меняется на 19 июля 2021. И так постоянно?

22 июля 2021 г.

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

echo date('d.m.Y', strtotime('next Monday', time()));

Приведенный код выведет дату ближайшего понедельника в формате 19.07.2021. Если вы хотите выводить название месяца на русском, то один из вариантов - использовать функцию date() отдельно для генерации номера дня, месяца и года. При этом, нужно будет заменить номер месяца на его название (например, использовать массив с названиями месяцев на русском, подставляя элемент массива с порядковым номером нужного месяца).

28 июля 2021 г.
Есть готовый код но в комментарий не влазит
02 ноября 2021 г.
Спасибо! А можете ли подсказать как выглядел бы этот скрипт, если его вынести в отдельный js файл?
26 ноября 2021 г.

Олег, вы можете использовать приведенный в примерах JavaScript код в подключенных .js файлах. Никаких изменений при этом вносить не нужно.

15 августа 2022 г.

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

16 августа 2022 г.

Марат, используйте тег span вместо div, тогда дата будет отображаться без переноса на новую строку (если иное не указано через CSS):

Здравствуйте!
Подскажите, пожалуйста, каким образом действовать, если нужно вывести точное время в нескольких городах с разными часовыми поясами? Благодарю за отличную статью и обратную связь!

29 августа 2022 г.

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

Тем не менее, если все-равно хотите JavaScript решение, то можно воспользоваться функцией Date.now(), которая возвращает количество миллисекунд, прошедших с момента начала UNIX эпохи. Далее использовать функцию getTimezoneOffset() для того, чтобы получить время нулевого часового пояса. После этого добавлять или отнимать нужное вам количество миллисекунд, чтобы получить время, смещенное на нужное количество часов и минут. При этом вам нужно будет контролировать переход на летнее время, если он применяется в тех городах, что вам нужны.

Вот этот код даст вам дату и время нулевого часового пояса (GTM):

let date_gtm = new Date (Date.now()+(new Date().getTimezoneOffset() * 60 * 1000));

Этот код даст дату и время GTM+04:00:

let date_gtm_plus4 = new Date (Date.now()+(new Date().getTimezoneOffset() * 60 * 1000 + 4 * 60 * 60 * 1000));

Вместо цифры 4 можно подставлять нужное вам количество часов. Также можно заменить знак "плюс" на "минус", если нужно отрицательное смещение.

29 августа 2022 г.

Здравствуйте!
К сожалению, не знаю, как обратиться… очень признательна за обратную связь!
Всё дело в том, что не знаю, как лучше, и не настаиваю на своём варианте, а спрашиваю более умных людей 🙂
Если серверное время точнее, то можно копать и в его сторону… к примеру, я вывела время в .php файле с помощью кода:

';
$moscow_time = date("H:i:s");
echo'Московское время ';

В целом можно использовать и для других часовых поясов. Но дело в том, что страница дёргается каждую секунду для обновления. Это как-то можно исправить? И можно ли учесть при использовании серверного времени переходы на зимнее и летнее время?

Если же говорить о решении на JS, то я покопала инфу: есть несколько библиотек времени, к примеру momentjs, luxon
Какое решение стоит выбрать, на Ваш взгляд?

29 августа 2022 г.

Анна, мне нравится ваш подход.

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

Могу предложить такой способ:
1) С помощью PHP функции time(); получить timestamp - метку системного времени (количество секунд с начала эпохи UNIX) и вывести ее на HTML страницу в скрытое поле либо data атрибут блока где будут часы.
Далее работаем с JS.
2) При загрузке страницы вытаскиваем в переменную JS значение timestamp, умножаем его на 1000, чтобы секунды перевести в миллисекунды и создаем объект Date() используя в качестве аргумента это значение.
3) Далее используем скрипт из этой статьи для создания часов реального времени.
4) Чтобы выводить время в разных часовых поясах можно на PHP сделать несколько timestamp, прибавляя или отнимая нужное количество секунд к значению time() и передать их все в HTML.

Преимущество такого решения следующие:
1) Мы используем как базу свое серверное время, поэтому для всех пользователей оно будет одинаковым и корректным (если на сервере правильно установлено).
2) Нет нагрузки на сервер. Мы обращаемся к серверу только 1 раз - в момент генерации HTML страницы.
3) Мы можем запустить любое количество часов на странице одной JS функцией, что удобно.

Что касается часового пояса, можно определять дату через php и в зависимости от нее добавлять к timestamp разное количество секунд, например, в период летнего времени +5 часов, зимнего +4 часа.

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