Dies kann mit sehr wenig Javascript erreicht werden.
Angenommen, die „Erstellt“-Zeit wird dynamisch in der Tabelle im Format dd MMM yyyy hh:mm:ss gerendert , so etwas wie das sollte ausreichen:
<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>
Kopieren Sie den obigen Code in eine Datei, sagen Sie index.html , und öffnen Sie es in einem Browser. Ich habe es auf Chrome getestet.
Es sollte die verstrichene Zeit alle 2 Sekunden aktualisieren, aber Sie können das Aktualisierungsintervall auf etwas ändern, das zu Ihnen passt, z. um es alle 5 Minuten aktualisieren zu lassen:
new ElapsedTimeLogger("#date", "#elapsed", 300);
Das allgemeine Konzept besteht darin, das gerenderte „Erstellt“-Datum in einen Epochenzeitstempel (in Millisekunden) zu zerlegen und dann seine Differenz mit der aktuellen Systemzeit zu berechnen. Um die verstrichene Zeit dynamisch zu aktualisieren, verwenden Sie setInterval von Javascript Funktion. Um die Aktualisierung der verstrichenen Zeit zu stoppen, verwenden Sie clearTimeout von Javascript Funktion.
Ich habe die prettyPrintTime aufgehoben Funktion von powtac
.
