Esto se puede lograr con muy poco Javascript.
Suponiendo que el tiempo "Creado" se represente dinámicamente en la tabla con el formato dd MMM yyyy hh:mm:ss , algo como esto debería funcionar:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
ElapsedTimeLogger = function(dateElementId, elapsedElementId, interval) {
var container = $(elapsedElementId);
var time = parseDate($(dateElementId).text());
var interval = interval;
var timer;
function parseDate(dateString) {
var date = new Date(dateString);
return date.getTime();
}
function update() {
var systemTime = new Date().getTime();
elapsedTime = systemTime - time;
container.html(prettyPrintTime(Math.floor(elapsedTime / 1000)));
}
function prettyPrintTime(numSeconds) {
var hours = Math.floor(numSeconds / 3600);
var minutes = Math.floor((numSeconds - (hours * 3600)) / 60);
var seconds = numSeconds - (hours * 3600) - (minutes * 60);
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
var time = hours + ":" + minutes + ":" + seconds;
return time;
}
this.start = function() {
timer = setInterval(function() {update()}, interval * 1000);
}
this.stop = function() {
clearTimeout(timer);
}
}
$(document).ready(function () {
var timeLogger = new ElapsedTimeLogger("#date", "#elapsed", 2);
timeLogger.start();
$("#stop_timer").click(function() {
timeLogger.stop();
});
$("#start_timer").click(function() {
timeLogger.start();
});
});
</script>
</head>
<body>
<table border="1">
<tr><th>Created</th><th>Timer</th></tr>
<tr><td id="date">21 Feb 2013 12:30:00</td><td id="elapsed"></td></tr>
</table>
<input id="stop_timer" type="button" value="Stop timer"></input>
<input id="start_timer" type="button" value="Start timer"></input>
</body>
</html>
Copie el código anterior en un archivo, digamos index.html y ábralo en un navegador. Lo probé en Chrome.
Debería actualizar el tiempo transcurrido cada 2 segundos, pero puede cambiar el intervalo de actualización a algo que le convenga, p. para que se actualice cada 5 minutos:
new ElapsedTimeLogger("#date", "#elapsed", 300);
El concepto general es analizar la fecha "Creada" representada en una marca de tiempo de época (en milisegundos) y luego calcular su diferencia con la hora actual del sistema. Para obtener el tiempo transcurrido actualizándose dinámicamente, use setInterval de Javascript función. Para dejar de actualizar el tiempo transcurrido, use clearTimeout de Javascript función.
Levanté el prettyPrintTime función de powtac
.
