Содержание
На многих веб-приложениях и веб-сайтах вы можете видеть даты и легко их читать, не зная, какой сегодня день, или не зная, какой день 25 июня, апреля и т. Д. Эта функция достигается в браузере, просто начиная с Исходная дата и создание удобочитаемого описания различных даты и текущего времени. Они обычно обновляются динамически, когда вы находитесь на сайте тоже.
Если вы хотите реализовать такую функцию в своем приложении, мы рекомендуем вам использовать для этого библиотеку с открытым исходным кодом. Мы собрали 5 самых удивительных, известных и простых в использовании библиотек, которые позволяют отображать даты в формате времени назад. Все они достигают того же, и большинство из них требуют, чтобы вы указали даты в разметке с ISO 8601 формат, но такие факторы, как поддержка и то, насколько хорошо поддерживается библиотека, дают им другое место в нашем топе. Наслаждайся этим !
5. TinyAgo.js
TinyAgo.js — это не огромная библиотека, а крошечная утилита (уменьшенная до 180 байт) для преобразования меток времени в относительное время. Это идеально, если вы не хотите включать огромные библиотеки для достижения чего-то простого. Библиотека предоставляет одну функцию ago(), который ожидает аргумент, который является меткой времени в миллисекундах (например, возвращаемое значение Date.getTime() метод) и возвращает строку с относительным временем:
var d = new Date('January 1, 2014');
console.log(ago(d.getTime())); // -> '7 months' (assuming it's August 2014)Если вы хотите достичь того же, что и в других библиотеках, тогда ваши элементы времени должны отображаться
July 2, 2017
$(".timeago").each(function(i,el){
var element = $(el);
// Change text of element to a human readable date with ago
// like 2 minutes, 2 hours
element.text(ago(element.attr("timestamp")));
});
4. Livestamp.js
Livestamp.js — это очень простой и ненавязчивый плагин jQuery, который обеспечивает автоматическое обновление текста timeago для ваших HTML-элементов с метками времени с использованием библиотеки JavaScript Moment.js в качестве зависимости. Первое, что вам нужно сделать, это загрузить зависимости и загрузить их перед плагином. Тебе понадобиться JQuery (> = 1,7) и Moment.js (> = 1,7). Как только у вас есть все, поместите это где-нибудь на своей странице:
Вам не нужно будет писать дополнительный код для его инициализации. Просто используйте с data-livestamp Атрибут установлен на желаемую метку времени Unix (в секундах), например:
You discovered Livestamp.js 3. Умное Время назад
Smart Time Ago — небольшая библиотека jQuery для интеллектуального обновления относительных временных меток в вашем документе. (например, «3 часа назад»). Smart Time Ago будет проверять и обновлять относительное время каждые 60000 миллисекунд (60 секунд) в области, которую вы указали в начале. Позже он проверит самое новое время в вашей области, а затем настроит интервал проверки на правильное значение.
По умолчанию Smart Time Ago будет продолжать следить за элементами времени с классом timeago и ISO8601 отметка времени в атрибуте datetime:
about 8 hours ago
Инициализатор JavaScript ожидает родительский элемент, в котором расположены элементы timeago. Это означает, что вы можете предоставить контекст или все тело:
// Select context of the time elements
$('#time-labels').timeago();
// Or in all your document
$('body').timeago();Таким образом, каждый элемент с классом timeago и атрибутом datetime автоматически будет иметь удобочитаемое описание даты. Например, если самое новое время в указанной вами области — «2 часа назад». Нет необходимости проверять и обновлять относительное время каждые 60 секунд. Вместо этого Smart Time Ago автоматически увеличит интервал проверки до 30 минут.
2. Timeago.js
timeago.js — это крошечная библиотека (2 КБ), используемая для форматирования даты с понятным для человека описанием даты, например: «3 часа назад» без зависимостей. Он поддерживает автоматическое обновление нечетких временных отметок (например, «4 минуты назад» или «около 1 дня назад»). Все, что вам нужно сделать, чтобы использовать эту библиотеку, это загрузить исходный скрипт:
Затем, как стандарт, плагин работает на теги в HTML5, это означает, что вам нужно отформатировать даты на стороне сервера, используя Формат ISO 8601. и плагин обновит свой контент в удобочитаемом формате. Например, вы должны предоставить следующую разметку со стороны сервера в своем документе:
July 17, 2008
Когда DOM готов, вы можете использовать JavaScript для его инициализации:
timeago().render(document.querySelectorAll('.timeago'));И элемент времени будет обновлен:
9 years ago
1. JQuery Time Ago
Timeago — это плагин jQuery, который позволяет легко поддерживать автоматическое обновление нечетких временных отметок (например, «4 минуты назад» или «около 1 дня назад»). Это jQuery-версия Timeago.js. Все, что вам нужно сделать, чтобы использовать эту библиотеку, это включить jQuery и плагин, используя тег script:
Затем, как стандарт, плагин работает на теги в HTML5, это означает, что вам нужно отформатировать даты на стороне сервера, используя Формат ISO 8601. и плагин обновит свой контент в удобочитаемом формате. Например, вы должны предоставить следующую разметку со стороны сервера в своем документе:
July 17, 2008
И как только плагин загрузится, вам нужно будет его инициализировать. Рекомендуется просто добавить класс timeago к элементу, который будет динамически обновляться в читаемом формате, чтобы код инициализации выглядел так:
$(function() {
// Initialize timeago on all the elements with the timeago class
$("time.timeago").timeago();
});Затем наш тег времени будет обновлен:
9 years ago
Похвальные грамоты
Angular Timeago
Эта угловая директива / фильтр / служба может использоваться для форматирования даты, чтобы она показывала, как давно данное время сравнивалось с текущим.
Реакция Timeago
React timeago — очень простой компонент для ReactJ, который отображает удобочитаемое описание по разнице даты по сравнению с сегодняшним днем. React-timeago — это очень простой компонент, который принимает подпорку даты и возвращает диапазон с действующей датой обновления в формате времени назад. Дата будет обновляться только так часто, как это необходимо. Для отметок времени менее минуты отсюда каждую секунду, для отметок времени до 5 минут отсчета каждый час и т. Д. React-TimeAgo выполняет минимальное количество необходимых обновлений.
Если вы знаете еще одну замечательную библиотеку, которая позволяет форматировать даты в браузере в стиле времени назад, поделитесь им с сообществом в поле для комментариев.
