Dette kan opnås med meget lidt Javascript.
Forudsat at den "Oprettede" tid er gengivet dynamisk i tabellen med formatet dd MMM yyyy hh:mm:ss , noget som dette burde gøre tricket:
<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>
Kopier koden ovenfor til en fil, sig index.html , og åbn den i en browser. Jeg testede det i Chrome.
Den skal opdatere den forløbne tid hvert 2. sekund, men du kan ændre opdateringsintervallet til noget, der passer dig, f.eks. for at få det til at opdatere hvert 5. minut:
new ElapsedTimeLogger("#date", "#elapsed", 300);
Det generelle koncept er at parse den gengivne "Oprettet" dato til et epoketidsstempel (i millisekunder) og derefter beregne dens forskel med den aktuelle systemtid. For at få den forløbne tid til at opdatere dynamisk bruger du Javascripts setInterval fungere. Brug Javascripts clearTimeout for at stoppe med at opdatere den forløbne tid funktion.
Jeg løftede prettyPrintTime funktion fra powtac
.