Detta kan uppnås med väldigt lite Javascript.
Förutsatt att den "skapade" tiden renderas dynamiskt i tabellen med formatet dd MMM yyyy hh:mm:ss , något sånt här borde göra susen:
<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>
Kopiera koden ovan till en fil, säg index.html , och öppna den i en webbläsare. Jag testade det i Chrome.
Den ska uppdatera den förflutna tiden var 2:e sekund, men du kan ändra uppdateringsintervallet till något som passar dig, t.ex. för att få den att uppdatera var 5:e minut:
new ElapsedTimeLogger("#date", "#elapsed", 300);
Det allmänna konceptet är att analysera det renderade "Skapade" datumet till en epoktidsstämpel (i millisekunder) och sedan beräkna dess skillnad med den aktuella systemtiden. För att få den förflutna tiden att uppdatera dynamiskt använder du Javascripts setInterval fungera. För att sluta uppdatera den förflutna tiden använd Javascripts clearTimeout funktion.
Jag lyfte prettyPrintTime funktion från powtac
.