2009-05-04 10 views
5

Básicamente quiero para producir el siguiente:¿Hay un buen complemento jQuery o código JS para duraciones de tiempo?

de int 67 a 1 minuto 7 segundos

de int 953 a 15 minutos 53 segundos

de int 3 869 a 1 hora 4 minutos 29 segundos

código

seudo:

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

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

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

creo que esto es más de una Pregunta JavaScript que una pregunta jQuery. Lo que estás pidiendo realmente está fuera del alcance de lo que jQuery es para ... –

+0

Probablemente tengas razón, pero pensé que lo haría relacionado a jquery en el caso de un plugin disponible ... Estoy comenzando a codificar algo ahora, pero estoy seguro de que este código está disponible en alguna parte ... – farinspace

+0

En realidad, si recuerdo que había una publicación en el blog sobre hoe SO genera sus marcas de tiempo de una manera "amigable para los humanos" ... pensé que había algún código fuente que sería útil allí, pero parece que no puedo encontrarlo ahora. –

Respuesta

9

El préstamo de la mayor parte de la respuesta de Guffa, esto debe hacer el truco como un plugin de 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' : '')); 
    }); 
}; 

Si usted tiene HTML de esta manera:

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

Y se llama así:

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

El HTML es convertido a:

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

Cada elemento también tiene un data attribute de 'original' con los segundos que contenía originalmente.

Mi respuesta responde directamente a su pregunta, pero voy a tomar una foto en la oscuridad: si desea mostrar cuánto tiempo pasó algo en el tiempo humano (es decir, "5 minutos atrás") está el jQuery timeago plugin para esto. Sin embargo, no creo que acepte segundos como el formato. Tiene que ser una fecha ISO 8601.

0

uso setTimeOut (expresión, milisecs)

donde expresión puede ser la función a ser llamada cuando la hora en milisecs se ha completado.

Un buen ejemplo la manipulación de varios contadores de tiempo se puede encontrar en: http://www.plus2net.com/javascript_tutorial/timer-set.php

+0

Estoy bastante seguro de que el OP quiere funciones para convertir el tiempo en segundos en una cadena de h, m, s, etc. ... –

+0

Zack tienes razón, ahora antes de la edición puedo ver cuál es el alcance de la pregunta – backslash17

0

No es elegante, pero debería funcionar:

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); 
} 

(actualizado para responder el uso de jQuery también)

3

Dar el elemento es una identificación para que sea de fácil acceso:

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

Ahora puede obtener el valor y convertirlo:

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

Editar:
Agregado Math.floor() según lo sugerido por Mike B.

0

agradable Guffa. Tendrá que añadir un poco de "piso" llama allí, sin embargo:

<snip> 
    var h = Math.floor(t/3600); 
    t %= 3600; 
    var m = Math.floor(t/60); 
<snip> 
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> 
1

Sólo en caso de que estés buscando algo más concisa, y desea evitar los problemas de espacio en blanco de cola y de pluralización incorrecta de algunos de los otros intentos:

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(" "); 
} 
Cuestiones relacionadas