При работе с датой и временем на сайте есть необходимость в том, чтобы суть содержимого понимали как пользователи сайта, так и роботы (поисковые системы, скрипты и т.п).
Указание даты и времени для ивента (например, "концерт Alan Walker в Москве 25 февраля в 19:00") в микроразметке, обозначение точки отсчета для скриптов на странице, улучшенное понимание даты и времени указанного в контенте страницы поисковой системой (например, с помощью тега <time>) - для этих целей нужно использовать формат времени 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 цифры.
Рассмотрим примеры вывода даты и времени в формате временной точки.
| Название | Формат | Пример |
|---|---|---|
| Дата, точное время, временная зона | YYYY-MM-DDThh:mm:ssTZD | 2010-05-12 22:47:11+02:00 |
| Дата и время | YYYY-MM-DDThh:mm | 2015-09-23 21:13 |
| Время с временной зоной | hh:mmTZD | 12:34+04:00 |
| Дата | YYYY-MM-DD | 2015-09-23 |
| Месяц и число | MM-DD | 01-30 |
| Год и месяц | YYYY-MM | 1989-11 |
| Год и неделя | YYYY-WW | 2009-46 |
| Год | YYYY | 2007 |
Формат периода времени (длительность)
Формат PWDTHMS используется когда нужно указать не конкретную точку, а период времени: "3 дня", "2 часа 5 минут" и т.п. То есть, когда нужно показать длительность.
Длительность периода считается в секундах. Если указана другая величина, время приводится к секундам путем умножения:
2 минуты = 2*60 = 120 секунд и т.п.
Расшифровка формата PWDTHMS:
P - префикс периода;
W - суффикс для количества недель (604800 секунд);
D - суффикс для количества дней (86400 секунд);
T - префикс времени;
H - суффикс для количества часов (3600 секунд);
M - суффикс для количества минут (60 секунд);
S - суффикс для количества секунд;
Примеры указания периода времени:
"x" - любое число.
| Название | Формат | Пример |
|---|---|---|
| 2 недели | PхW | P2W |
| 10 дней | PхD | P10D |
| 4 дня 3 часа 5 минут | PхDTхHхM | P4DT3H5M |
| 2 часа 37 минут | PTхHхM | PT2H37M |
| 5 минут 10 секунд | PTхMхS | PT5M10S |
Как вставить текущее время в HTML
Вывести на страницу сайта текущее время используя только лишь HTML не получится.
Для того, чтобы вставить текущую дату и время на сайт будем использовать JavaScript.
За вывод даты и времени в JavaScript отвечает объект типа Date().
Попробуем вывести текущую дату и время на экран с помощью встроенного скрипта:
<script type="text/javascript">
document.write(Date());
</script>Результат:
Как видим, выводится вся информация о дате и времени.
Дата и время в HTML в привычном формате
Если мы хотим вывести дату и время в более привычном формате, можем воспользоваться функциями getFullYear(), getMonth(), getDate(), getHours(), getMinutes(), getSeconds().
Поскольку функции возвращают значения месяцев, дней, часов, минут, секунд без ведущих нулей, нам понадобится написать дополнительную функцию, которая будет эти нули добавлять.
Также обратите внимание на то, что функция getMonth() возвращает значение от 0 до 11 (количество полных месяцев, прошедших от начала года до указанной даты), а не порядковый номер месяца от 1 до 12. Поэтому, чтобы получить календарный номер месяца нужно к результату функции прибавить единицу.
Вставить текущее время и дату в HTML в привычном формате можно с помощью следующего кода:
<div id="current_date_time_block"></div>
<script type="text/javascript">
/* функция добавления ведущих нулей */
/* (если число меньше десяти, перед числом добавляем ноль) */
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();
</script>Результат:
Таким образом у нас получилось вывести на страницу сайта точное время на момент открытия страницы.
Часы на сайт, обновляемые в реальном времени
Если мы хотим, чтобы пользователь всегда видел актуальное время, то есть хотим сделать часы на странице, нужно реализовать обновление времени один раз в секунду (либо в минуту, если вы не выводите секунды). Для этого воспользуемся интервалом в JavaScript.
<div id="current_date_time_block2"></div>
<script type="text/javascript">
/* каждую секунду получаем текущую дату и время */
/* и вставляем значение в блок с id "current_date_time_block2" */
setInterval(function () {
document.getElementById('current_date_time_block2').innerHTML = date_time();
}, 1000);
</script>Результат:
Изменить формат даты и времени, выводимый в HTML код страницы, вы можете, комбинируя функции объекта Date(). Все они описаны в справочнике по JavaScript.
вместо 12 (декабрь) показывает 11 (ноябрь)
Здравствуйте.
Где-то копировал сценарий такой-же небольшой, подобный(!) этому (ниже)
_______________________________________
<body><center><div id="timedisplay"></div>
<p>Время вашего пк</p><script language="JavaScript">
<!--<br />
function fulltime () {
var time=new Date();
document.clock.full. value=time.toLocaleString();
setTimeout('fulltime()',500)
}
-->
</script><form name="clock"><input size="24" name="full"></form><script language="JavaScript">
fulltime ();
</script></center></body>
_______________________________________
Но была в нём строчка с чьим-то доменом, в которую вставлял поочерёдно time.windows.com , time.nist.gov , timeserver.ru. На странице браузера сразу 2 скрипта работали - который здесь и (мировой, а не клиентский) тот, что "обронил" случайно из несохранённого блокнота. В двух строках секунды с разным интервалом в зависимости от подставленного ntp, а при ручной корректировке времени пк изменение отображалось только в той строке, скрипт которой выше.
Может кто поможет - выложит сюда примерно то, что потерял, и не получается опять найти? :)
Если вы "не доверяете" клиентскому времени, то, в большинстве случаев, можно использовать как основу время сервера, где расположен ваш сайт. В этом случае не нужно будет обращаться к сторонним сервисам.
В котором время берётся не с сервера, где он в страницу вписан, тем паче не с клиента. А напрямую с вписанного url сервера времени.
Тестировал страницу на своём "клиентском", разница с локальными часами величины расхождения в синхронизации на каждом из 3х серверов (time.windows.com , time.nist.gov , timeserver.ru) была заметна.
Дело не в "доверяете-или-нет", а в том, что не абсолютно все клиентские пк настроемы на автосинхронизацию.
По вашему описанию не совсем понятно как вы планируете пользоваться этим скриптом, но, в любом случае, один из вариантов как можно реализовать часы со "своим" временем - это взять как базу отсчета времени время сервера или время своего компьютера и прибавлять к нему то количество секунд, минут, часов, на которое отличается ваше желаемое время.
Например, вы знаете, что время компьютера 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 справочниках.
При создании экземпляра Date() в нем содержится время на момент его создания.
Все, что вам нужно сделать - это создать и сохранить экземпляр Date() в момент появления сообщения:
var message_datetime = new Date();
Добавьте эту строку в функцию вывода нового сообщения и тогда для каждого сообщения будет фиксироваться время появления этого сообщения. Только не забудьте описать вывод message_datetime в нужном вам месте.
Для появления сообщения служит простейший скрипт:
<script> setTimeout (function(){$('.txt1') .fadeIn('fast')} ,5000); </script>
Соответственно на странице сообщения размещается:
<span class="txt1" style="display: none;"> сообщение </span>
Можно к этому как-то пришить вышесказанное?
Если долго объяснять и это очень муторно для вас, то можно оставить без ответа. )
Замените ваш скрипт следующим:
<script>
function date_time()
{
var current_datetime = new Date();
return current_datetime.getDate() + "." + (current_datetime.getMonth()+1) + "." + current_datetime.getFullYear() + " " + current_datetime.getHours() + ":"+current_datetime.getMinutes() + ":"+current_datetime.getSeconds();
}
setTimeout(function() {
$('.txt1').append("<br />"+date_time());
$('.txt1').fadeIn('fast');
}, 5000);
</script>
<script>
function date_time()
{
var current_datetime = new Date();
return current_datetime.getDate() + "." + (current_datetime.getMonth()+1) + "." + current_datetime.getFullYear() + " " + current_datetime.getHours() + ":"+current_datetime.getMinutes() + ":"+current_datetime.getSeconds();
}
setTimeout(function() {
$('.txt1').append("<br />"+date_time());
$('.txt1').fadeIn('fast');
}, 5000);
setTimeout(function() {
$('.txt2').append("<br />"+date_time());
$('.txt2').fadeIn('fast');
}, 6000);
setTimeout(function() {
$('.txt3').append("<br />"+date_time());
$('.txt3').fadeIn('fast');
}, 7000);
</script>
Там нет ничего сложного, достаточно скопировать нужные участки кода.
Если делаете часы реального времени, не забудьте, помимо основного блока кода, скопировать функцию date_time и zero_first_format из блока выше, либо полностью вышестоящий блок.
помогите девушке.
Ссылка на пример
Спасибо, отличная статья!
А если перед мной стоит задача вывести в блок цифру обозначающую разницу между 2011 годом и 2021.Тоесть чтобы в 2021 выводилась цифра 10, но если пользователь зайдёт уже 2022 то цифра изменилась на 11 в моем спане. Я так понимаю необходимо сделать счётчик? Помогите пожалуйста
<span id="year_minus_year"></span>
<script type="text/javascript">
var current_datetime = new Date();
var result = current_datetime.getFullYear() - 2011;
document.getElementById('year_minus_year').innerHTML = result;
</script>
<time datetime='06:00 - 22:00'>06:00 AM - 10:00 PM</time>
так?????????
echo('<div>'.date("H:i:s", time()).'</div>'); - этот код выведет блок с текущим серверным временем в формате <часы>:<минуты>:<секунды>.
<button id="get_current_time">Вывести текущее время</button>
<script type="text/javascript">
document.getElementById('get_current_time').addEventListener( 'click', function() {
document.getElementById('current_date_time_block').innerHTML = date_time();
});
</script>
Подскажите пожалуйста, у меня есть поле даты заполняемое руками пользователем.
input class="text medium-field" id="duedate" name="duedate" type="text" value=" YYYY-MM-DD"
как передать date_time(); в это поле?
используя пример выше?
спасибо большое
document.getElementById('duedate').value = date_time();
данный параметр передается через POST запрос.
Если есть желание, можете описать свою ситуацию подробно в разделе "Ответы на Ваши вопросы".
Мы стартуем 12 июля 2021
Приходит время на 12 июля и дата меняется на 19 июля 2021. И так постоянно?
echo date('d.m.Y', strtotime('next Monday', time()));
Приведенный код выведет дату ближайшего понедельника в формате 19.07.2021. Если вы хотите выводить название месяца на русском, то один из вариантов - использовать функцию date() отдельно для генерации номера дня, месяца и года. При этом, нужно будет заменить номер месяца на его название (например, использовать массив с названиями месяцев на русском, подставляя элемент массива с порядковым номером нужного месяца).
Ваша дата: 07.07.22 18.23.01.
Если поставить так, то выходит в разных строках:
Ваша дата: <div id="current_date_time_block2"></div>
Подскажите, пожалуйста, каким образом действовать, если нужно вывести точное время в нескольких городах с разными часовыми поясами? Благодарю за отличную статью и обратную связь!
Тем не менее, если все-равно хотите 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 можно подставлять нужное вам количество часов. Также можно заменить знак "плюс" на "минус", если нужно отрицательное смещение.
К сожалению, не знаю, как обратиться… очень признательна за обратную связь!
Всё дело в том, что не знаю, как лучше, и не настаиваю на своём варианте, а спрашиваю более умных людей :-)
Если серверное время точнее, то можно копать и в его сторону… к примеру, я вывела время в .php файле с помощью кода:
echo($default_timezone);
echo'
';
$moscow_time = date("H:i:s");
echo'Московское время ';
В целом можно использовать и для других часовых поясов. Но дело в том, что страница дёргается каждую секунду для обновления. Это как-то можно исправить? И можно ли учесть при использовании серверного времени переходы на зимнее и летнее время?
Если же говорить о решении на JS, то я покопала инфу: есть несколько библиотек времени, к примеру momentjs, luxon
Какое решение стоит выбрать, на Ваш взгляд?
Эту задача, как и большинство других в программировании, можно решить несколькими способами. Конечно же, дергать сервер каждую секунду - это не хорошо, тем более что для этого нет какой-либо нужды.
Могу предложить такой способ:
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 и далее работал уже на клиентской стороне (либо как описал выше, либо через подходящие библиотеки).
<meta http-equiv="Refresh" content="1" />
И, да, для тех кто может не знает, то показываю:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Refresh" content="1" />
<title>Пример веб-страницы</title>
</head>
Так делать можно до бесконечности добавлять мета и т.д.