Есть ли хороший плагин jQuery или код JS для продолжительности времени?

Я в основном хочу произвести следующее:

от int 67 до 1 минуты 7 секунд

от int 953 до 15 минут 53 секунды

от int 3869 до 1 часа 4 минут 29 секунд

псевдокод:

// original
<span class="time">67</span>

//output
<span class="time">1 minute 7 seconds</span>

// js
$('.time').format_duration();

javascript jquery time jquery-plugins
person farinspace    schedule 04.05.2009    source источник
comment
Я думаю, что это больше вопрос JavaScript, чем вопрос jQuery. То, о чем вы просите, действительно выходит за рамки того, для чего предназначен jQuery...   -  person Zack The Human    schedule 04.05.2009
comment
Возможно, вы правы, но я решил, что в случае доступного плагина я бы связал это с jquery... Сейчас я начинаю что-то кодировать, но я уверен, что этот код где-то доступен...   -  person farinspace    schedule 04.05.2009
comment
На самом деле, если я помню, в блоге было сообщение о том, что мотыга SO генерирует свои временные метки удобным для человека способом... Я думал, что там есть какой-то исходный код, который был бы полезен, но сейчас я не могу его найти.   -  person Zack The Human    schedule 04.05.2009

Ответы (6)


arrow_upward
9
arrow_downward

Заимствуя большую часть ответа Гуффы, это должно сработать как плагин jQuery:

jQuery.fn.time_from_seconds = function() {
    return this.each(function() {
        var t = parseInt($(this).text(), 10);
        $(this).data('original', t);
        var h = Math.floor(t / 3600);
        t %= 3600;
        var m = Math.floor(t / 60);
        var s = Math.floor(t % 60);
        $(this).text((h > 0 ? h + ' hour' + ((h > 1) ? 's ' : ' ') : '') +
                     (m > 0 ? m + ' minute' + ((m > 1) ? 's ' : ' ') : '') +
                     s + ' second' + ((s > 1) ? 's' : ''));
    });
};

Если у вас есть такой HTML:

<span class='time'>67</span>
<span class='time'>953</span>
<span class='time'>3869</span>

И вы называете это так:

$('.time').time_from_seconds();

HTML превращается в:

<span class="time">1 minute 7 seconds</span>
<span class="time">15 minutes 53 seconds</span>
<span class="time">1 hour 4 minutes 29 seconds</span>

Каждый элемент также имеет атрибут данных 'original' с секундами, которые он изначально содержал.

Мой ответ прямо отвечает на ваш вопрос, но я собираюсь сделать снимок в темноте: если вы хотите показать, как давно что-то произошло в человеческом времени (т.е. «5 минут назад»), есть плагин jQuery timeago для этого. Однако я не думаю, что он принимает секунды в качестве формата. Это должна быть дата ISO 8601.

person Paolo Bergantino    schedule 04.05.2009

arrow_upward
3
arrow_downward

Дайте элементу идентификатор, чтобы к нему было легко получить доступ:

<span id="time">67</span>

Теперь вы можете получить значение и преобразовать его:

var o = document.getElementById('time');
var t = parseInt(o.innerHTML);
var h = Math.floor(t / 3600);
t %= 3600;
var m = Math.floor(t / 60);
var s = t % 60;
o.innerHTML =
   (h > 0 ? h + ' hours ' : '') +
   (m > 0 ? m + ' minutes ' : '') +
   s + ' seconds';

Изменить:
Добавлен Math.floor(), предложенный Майком Б.

person Guffa    schedule 04.05.2009

arrow_upward
1
arrow_downward

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

function timeString( t ) {
    var ret = [], t = {
        hour: parseInt(t/3600),
        minute: parseInt(t/60%60),
        second: t%60
    };

    for ( var n in t )
        t[n] && ret.push( t[n], n + "s".substr( t[n] < 2 ) );

    return ret.join(" ");
}
person Jed Schmidt    schedule 04.05.2009

arrow_upward
0
arrow_downward

Это не элегантно, но должно работать:

function format_duration(elem) {
var num = parseInt($(elem).text());
var hours = 0;
var mins = 0;
var secs = 0;
while (num > 0) {
  if (num < 60) {
    secs += num;
    num = 0;
  }
  else if (num < 3600) {
    mins++;
    num -= 60;
  }
  else if (num < 86400) {
    hours++;
    num -= 3600;
  }
}
var rv = "";
if (hours > 0) {
    rv += hours+" hours ";
}
if (mins > 0) {
    rv += mins+" mins ";
}
if (secs > 0) { 
    rv += secs+" secs ";
}
$(elem).text(rv);
}

(обновлено, чтобы ответить на использование jquery)

person Community    schedule 04.05.2009

arrow_upward
0
arrow_downward

Используйте setTimeOut(выражение,миллисекунды)

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

Хороший пример управления несколькими счетчиками времени можно найти по адресу: http://www.plus2net.com/javascript_tutorial/timer-set.php

person backslash17    schedule 04.05.2009
comment
Я почти уверен, что OP хочет, чтобы функции преобразовывали время в секундах в строку h, m, s и т. д. - person Zack The Human; 04.05.2009
comment
Зак, ты прав, теперь, перед редакцией, я вижу, в чем суть вопроса. - person backslash17; 04.05.2009

arrow_upward
0
arrow_downward

красивая Гуффа. Однако вам нужно добавить несколько «этажных» вызовов:

<snip>
    var h = Math.floor(t / 3600);
    t %= 3600;
    var m = Math.floor(t / 60);
<snip>
person Community    schedule 04.05.2009