我基本上想制作以下内容：
从整数67到1分钟7秒
从整数953到15分钟53秒
从整数3869到1小时4分钟29秒
伪代码：
// original
<span class="time">67</span>
//output
<span class="time">1 minute 7 seconds</span>
// js
$('.time').format_duration();
有没有一个好的jQuery插件或JS代码可以用于时间持续时间？
5
- farinspace
3
我认为这更像是一个关于JavaScript的问题而不是jQuery的问题。你所询问的内容实际上超出了jQuery的范围... - Zack The Human
你可能是对的，但我想让它与jQuery相关联，以防有可用的插件...我现在开始编写一些代码，但我相信这段代码在某个地方是可用的... - farinspace
实际上，如果我没记错的话，有一篇关于SO如何以“人性化”的方式生成时间戳的博客文章......我记得那里有一些很有用的源代码，但现在好像找不到了。 - Zack The Human
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>
每个元素还有一个名为“original”的data attribute，其中包含其最初包含的秒数。
我的回答直接回答了你的问题，但我要冒险猜测：如果您想显示发生时间距离当前时间多长时间（即“5分钟前”），可以使用jQuery timeago plugin。不过，我认为它不接受秒作为格式，必须是ISO 8601日期格式。
- Paolo Bergantino
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>
- Scott Evernden
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()。
- Guffa
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(" ");
}
- Jed Schmidt
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的使用）
- Mike B.
0
不错的代码，但你需要加入一些“floor”函数调用：
<snip>
var h = Math.floor(t / 3600);
t %= 3600;
var m = Math.floor(t / 60);
<snip>
- Mike B.
0
使用setTimeOut(expression,milisecs)
其中expression可以是在milisecs时间完成后要调用的函数。
一个很好的操作多个计时器的示例可以在以下链接中找到： http://www.plus2net.com/javascript_tutorial/timer-set.php
- backslash17
2
我很确定原帖作者想要编写函数，将以秒为单位的时间转换成包含小时、分钟、秒等信息的字符串。 - Zack The Human
Zack 你是对的，现在在编辑之前我可以看到问题的范围。 - backslash17
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接