5

我基本上想产生以下内容：

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

7 回答 7

9

借用 Guffa 的大部分答案，这应该作为一个 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>

每个元素还具有“原始”的数据属性以及它最初包含的秒数。

我的回答直接回答了你的问题，但我要在黑暗中试一试：如果你想显示人类时间多久前发生的事情（即“5 分钟前”），可以使用jQuery timeago 插件. 不过，我认为它不接受秒作为格式。它必须是ISO 8601日期。

于 2009-05-04T05:54:29.487 回答
6 
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script>

var tbl = [
    [ 7*24*60*60, 'week' ],
    [ 24*60*60, 'day' ],
    [ 60*60, 'hour' ],
    [ 60, 'minute' ],
    [ 1, 'second' ]
];

function convert() {
    var t = parseInt($('#val').val());
    var r = '';
    for (var i = 0; i < tbl.length; i++) {
        var d = tbl[i];
        if (d[0] < t) {
            var u = Math.floor(t / d[0]);
            t -= u * d[0];
            r += u + ' ' + d[1] + (u == 1 ? ' ' : 's ');
        }
    }
    $('#result').html(r);
}

</script>
</head>
<body>
<input id='val' type='text' size='10' />
<input type='button' value='convert' onclick='convert()' />
<div id='result' />
</body>
</html>
于 2009-05-04T06:06:57.427 回答
3

给元素一个 id 以便于访问：

<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';

编辑：
按照 Mike B 的建议添加了 Math.floor()。

于 2009-05-04T05:33:16.200 回答
1

以防万一您正在寻找更简洁的内容，并希望避免其他一些尝试的尾随空格和不正确的复数问题：

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(" ");
}
于 2009-05-04T06:16:41.303 回答
0

使用 setTimeOut（表达式，毫秒）

其中表达式可以是在以毫秒为单位的时间完成时要调用的函数。

可以在以下位置找到操纵多个时间计数器的一个很好的示例： http ://www.plus2net.com/javascript_tutorial/timer-set.php

于 2009-05-04T05:20:09.367 回答
0

它并不优雅，但应该可以工作：

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 的使用）

于 2009-05-04T05:28:37.660 回答
0

漂亮的古法。不过，您需要在其中添加一些“地板”呼叫：

<snip>
    var h = Math.floor(t / 3600);
    t %= 3600;
    var m = Math.floor(t / 60);
<snip>
于 2009-05-04T05:43:21.197 回答