Веб-дизайн и поисковая оптимизация
Дата на сайте
Cоздание скрипта даты и вставка его на HTML-страницу
Вот весь скрипт даты:
Естественно, вы можете оформлять шрифт выводимой надписи обычными средствами HTML. В данном случае использован жирный красный шрифт.
Кстати, вывод текущей даты в тексте частенько используется недобросовестными сайтостроителями в подписях под новостями или статьями: вы видите сегодняшнее число, хотя новость уже давно состарилась.
Теперь для любознательных, а также любящих смотреть в корень, разберём составляющие нашего скрипта вывода даты. Это полезно не только для чувства глубокого внутреннего удовлетворения, но и позволит вам задавать необходимую форму вывода даты.
Объект Date возвращает, то есть считывает с компьютера, информацию о текущей дате. Хотя значения даты возвращаются в стандартной форме, фактическое значение хранится как количество миллисекунд, прошедших после полуночи 1 января 1970 года. Применение этого соглашения запрещает использование дат до 1970 года. (Всегда удивляюсь, как изощрённо программисты умудряются запудрить мозги нормальному человеку. Вспомните страшилки, которыми нас пугали при переходе к новому 2000 году!)
Как видно из скрипта, получение данных о текущем времени выполняет элемент get. Этот метод позволяет получить следующую информацию:
Вставлять непосредственно Java-скрипт внутрь страницы сайта не всегда удобно. Лучше поместить описание скрипта в начало страницы между тегами и задать переменную, которую будем вызывать по мере необходимости в тексте. Назовём её TODAY и определим в ней форму вывода даты аналогично вышеизложенному. Скрипт будет выглядеть следующим образом:
Для вывода даты вызываем скрипт в нужном месте HTML-кода страницы, используя следующую команду:
Если ваш сайт содержит много страниц, на которых надо показывать дату, то удобнее выделить Java-скрипт вывода даты в отдельный файл, например, data.js. Практически, это страница, состоящая из первого из описанных скриптов, то есть со строкой document.write (см. выше). Располагать её надо в том же каталоге, что и основная страница, и вызывать в месте вывода даты следующим образом:
.
Замечание. Следует иметь ввиду, что описанный скрипт выводит дату, установленную на компьютере пользователя, что не всегда соответствует реальному текущему времени. Если вам необходимо показать точное время, то необходимо использовать РНР-скрипт, который будет показывать время на сервере. Об этом способе вывода даты на сайте, а также о добавлении даты в письма с формы обратной связи расмотрим в следующей статье.
Элемент HTML <time>
Элемент <time> представляет собой дату, время или период времени, представленные в машинночитаемом формате. Он может быть полезен для создания расписаний, архивов или других функций, связанных со временем. WordPress использует этот элемент в базовой теме оформления. Ещё один пример использования <time> — Reddit:
Краткая история
Жизненный путь этого элемента был нелёгким. Его добавили в спецификацию HTML5 в 2009 году. Два года спустя, в 2011, его убрали и заменили на гораздо более широкий <data>. Однако в этом же году его вернули и добавили новых возможностей. Сейчас его можно уверенно использовать.
Ситуацию хорошо описал Брюс Лоусон (убрали, вернули, текущее положение дел). [Та же история на Хабре: убрали, вернули]. Классический пример того, как реакция сообщества разработчиков влияет на развитие HTML.
Тэг и атрибут
<time> можно использовать как обычный тег HTML. Вот простой пример, который представляет ноябрь 2011:
В этом примере текст внутри тега является валидным значением атрибута datetime (о котором подробнее пойдёт речь дальше). Однако это совершенно необязательно. Это значение можно переместить в атрибут, указанный явно, а внутри тега использовать произвольный текст:
Именно атрибут datetime придаёт этому элементу его уникальные свойства. Он представляет в машинночитаемом виде любую дату, вермя или интервал, относящийся к тексту внутри тега. Так как он предназначен для компьютеров, его формат жестко определён.
В большинстве случаев текст, заключенный в тег, представляет то же самое время в удобочитаемом виде:
10 способов указания времени
Год и месяц
Очень просто: год идёт перед месяцем.
Год, затем месяц, затем день.
Дата без года
Только время
Часы, минуты, секунды. Секунды указывать необязательно. Доли секунды указываются с точностью до третьего знака.
Дата и время
Комбинация даты и времени, разделённых заглавной «T». Букву «T» можно заменить на пробел.
Часовой пояс
Начинается с плюса или минуса. Двоеточие необязательно. Всемирное координированное время (UTC, +00:00) можно заменить заглавной «Z».
Местная дата и время
Дата и время с указанием часового пояса, вместо «T» можно использовать пробел.
Год и неделя
Год, затем заглавная «W» и номер недели.
Только год
Временной интервал (первый способ)
«P», затем опционально — количество дней, «T», затем опционально — количество часов, минут и секунд. Все буквы только в верхнем регистре.
Временной интервал (второй способ)
Недели, дни, минуты, секунды. Буквы могут быть в любом регистре, пробелы необязательны.
Примеры
Проблемы с форматирование datetime?
Эта небольшая форма на CodePen поможет преобразовать значения даты и времени в корректный тег <time> :
Поддержка в брузерах
В чём преимущества использования <time>?
Здесь я процитирую Брюса Лоусона, так как, пожалуй, лучше и не скажешь:
Варианты использования однозначного указания даты придумать нетрудно. Браузер может предложить пользователю добавить событие на странице в его календарь. Браузер в Таиланде может автоматически преобразовать дату в григорианском календаре в традиционный буддийский. Японский браузер может показать <time>16:00</time> как «16:00時». Агрегаторы контента могут автоматически генерировать временную шкалу событий.
Поисковики могут улучшать результаты выдачи. Например, недавно был сильный снегопад, я погуглил и обнаружил, что школа, в которую ходят мои дети, сегодня закрыта. Только когда из школы позвонили и спросили, почему мои дети не пришли, я обнаружил, что внизу страницы с новостью о закрытии школы написано мелким шрифтом: «Опубликовано 5 января 2008». Поисковики вполне могли бы располагать недавние события выше в выдаче.
Ещё одна полезная мелочь
А вот пример кода для Rails, который выводит время в этих трёх видах:
Добавить дату и время на сайт
Приветствую Вас, дорогой товарищ! Продолжаем осваивать возможности веб-технологий и попробуем сейчас добавить дату и время на сайт. Сделать это можно несколькими способами. Мы рассмотрим два. Один с использованием PHP, а второй на JavaScript. Давайте начнем с первого. По традиции предлагаю посмотреть на пример.
Итак, для того, чтобы добавить дату и время на сайт в PHP, достаточно написать стандартную функцию, которая как раз и вызывает то, что нам нужно и у нее есть параметры, с которыми сейчас будем разбираться.
Выводить дату и время на сайте можно в различных форматах. Это один из самых распространенных. Но можно сделать и по другому. К примеру вывести дополнительно день недели, а так же написать название месяца. делается это так:
Дата и время выводится, но как вы уже заметили, то не совсем так, как нам нужно. Желательно, чтобы название месяца и день недели был на русском. Это небольшой нюанс или даже особенность самого языка. Но решить это можно довольно-таки легко. Мы создадим 2 массива с кириллическими названиями дней и месяцев и тогда все должно работать нормально.
Запись получилась длинноватой, но с задачей по добавлению даты и времени на сайт эта функция справилась отлично.
Добавить дату и время на сайт на JavaScript
И давайте сразу добавим корректные русские названия, чтобы все легко читалось. У функции вывода даты и времени в JS много разных параметров, я покажу наиболее часто используемые.
var data = new Date(); var month=new Array(12); month[0]=»Января»; month[1]=»Февраля»; month[2]=»Марта»; month[3]=»Апреля»; month[4]=»Мая»; month[5]=»Июня»; month[6]=»Июля»; month[7]=»Августа»; month[8]=»Сентября»; month[9]=»Октября»; month[11]=»Декабря»; var weekday=new Array(7); weekday[0]=»Воскресенье»; weekday[1]=»Понедельник»; weekday[2]=»Вторник»; weekday[3]=»Среда»; weekday[4]=»Четверг»; weekday[5]=»Пятница»; weekday[6]=»Суббота»; document.write (data.toLocaleString()); // 28.09.2019, 02:50:33 document.write(data.toString()); // Дата: Sat Sep 28 2019 02:50:38 GMT+0300 (Москва, стандартное время) document.write(data.getDate()+ ‘ ‘ + month[data.getMonth()]+ ‘ ‘ +data.getFullYear()+’ года. ‘+weekday[data.getDay()]+’. Время: ‘+data.toLocaleTimeString()); // 28 Сентября 2019 года. Суббота. Время: 02:50:45 document.write(‘Сегодня ‘ +data.getDate()+ ‘ ‘ + month[data.getMonth()]+ ‘ ‘ +data.getFullYear()+’ года. ‘+weekday[data.getDay()]+’. Время: ‘+data.getHours()+ ‘:’+data.getMinutes()); // Сегодня 28 Сентября 2019 года. Суббота. Время: 02:54
На демо странице первый и последний пример сделаны идентично, но следует отметить одну немаловажную деталь. Время в PHP и время в JS может отличаться. Все дело в том, что ПХП берет время с сервера, а JavaScript с вашего устройства, отсюда и разница. Оно может отличаться на несколько часов, в зависимости от часового пояса. Поэтому, если вам нужно вывести дату и время на сайте для пользователя, то лучше использовать JS. А счетчики посещений на серверных языках.
Идущие часы на сайт
И напоследок приведу небольшую JavaScript функцию, которая позволит вам добавить на сайт живые часы, которые будут отсчитывать время. Как на странице с примерами.
Дата на сайте 
Вот весь скрипт даты:
По-моему, проще некуда, достаточно красиво и понятно. Если у вас нет никакого желания изучать построение этого скрипта, то просто вставляйте его в любое место HTML-страницы и получите следующую надпись:
Еще один вариант более расширенный
Вобщем не требуется никаких навыков, просто тупо вставляем код и все ок!
Подробнее:
Как видно из скрипта, получение данных о текущем времени выполняет элемент get. Этот метод позволяет получить следующую информацию:
Вставлять непосредственно Java-скрипт внутрь страницы сайта не всегда удобно. Лучше поместить описание скрипта в начало страницы между тегами и задать переменную, которую будем вызывать по мере необходимости в тексте. Назовём её TODAY и определим в ней форму вывода даты аналогично вышеизложенному. Скрипт будет выглядеть следующим образом:
Для вывода даты вызываем скрипт в нужном месте HTML-кода страницы, используя следующую команду:
Если ваш сайт содержит много страниц, на которых надо показывать дату, то удобнее выделить Java-скрипт вывода даты в отдельный файл, например, data.js. Практически, это страница, состоящая из первого из описанных скриптов, то есть со строкой document.write (см. выше). Располагать её надо в том же каталоге, что и основная страница, и вызывать в месте вывода даты следующим образом:
Не забудьте проверить, чтобы файл data.js имел ту же кодировку, что и основной документ, иначе дата будет выводиться замечательными крючками, квадратиками и прочими финтифлюшками.
Замечание. Следует иметь ввиду, что описанный скрипт выводит дату, установленную на компьютере пользователя, что не всегда соответствует реальному текущему времени. Если вам необходимо показать точное время, то необходимо использовать РНР-скрипт, который будет показывать время на сервере.
Простой скрипт даты для сайта
На некоторых сайтах можно увидеть текущую дату. Дата может быть выведена в любом формате, например День недели,
число месяц год, или просто ДД.ММ.ГГГГ, и так далее. Для вывода даты используют самые разные скрипты, но я
приведу Вам самый простой пример.
С помощью данного скрипта можно вывести дату полностью, или отдельные ее компоненты (отдельно день недели, отдельно число, отдельно год и т.д.)
Итак, не буду Вас томить ожиданием, и приведу код для вывода даты в формате «день недели число месяц год.»:
Если Вы хотите вывести дату в формате ДД.ММ.ГГГГ без дня недели, используйте такой код:
А если хотите вывести месяц в цифровом формате, то есть вместо названия месяца вывести цифры, например вместо Января прописываем 01 и т.д.:
Идем дальше. Допустим, Вам нужно вывести только ДЕНЬ НЕДЕЛИ. Естественно здесь уже нужен другой код:
Если нужно вывести только ЧИСЛО (врядли это кому надо, но сделать можно), то используйте такой код:
В конце я использую «-е», чтобы после выглядело так, например 5-е, 6-е..
Идем дальше. Выводим только текущий МЕСЯЦ.
Ну и наконец, если нужно вывести только текущий ГОД.
Посмотреть различные варианты использования скрипта можно на этой странице.
P.S. Если Вы хотите добавить к дате часы, используйте простой скрипт.
Скачайте js-файл и закачайте его в определенную директорию сайта по FTP при помощи FileZilla, а в коде самой веб-страницы нужно прописать следующее:
Итак, мы разобрали самый простой скрипт вывода даты + скрипт для вывода и даты и времени. Применяйте данные скрипты по своему усмотрению как угодно! Удачи!