Ini dapat dicapai dengan sedikit Javascript.
Dengan asumsi bahwa waktu "Dibuat" dirender secara dinamis dalam tabel dengan format dd MMM yyyy hh:mm:ss , sesuatu seperti ini seharusnya berhasil:
<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>
Salin kode di atas ke dalam file, katakan index.html , dan buka di browser. Saya mengujinya di Chrome.
Itu harus memperbarui waktu yang telah berlalu setiap 2 detik, tetapi Anda dapat mengubah interval pembaruan menjadi sesuatu yang cocok untuk Anda, mis. untuk memperbaruinya setiap 5 menit:
new ElapsedTimeLogger("#date", "#elapsed", 300);
Konsep umumnya adalah mengurai tanggal "Dibuat" yang dirender menjadi stempel waktu Epoch (dalam milidetik) dan kemudian menghitung perbedaannya dengan waktu sistem saat ini. Untuk mendapatkan waktu yang telah berlalu memperbarui secara dinamis Anda menggunakan setInterval Javascript's fungsi. Untuk berhenti memperbarui waktu yang telah berlalu, gunakan clearTimeout Java Javascript fungsi.
Saya mengangkat prettyPrintTime fungsi dari powtac
.
