从数据库中的给定时间开始经过的时间 [英] Elapsed time from a given time in the database
问题描述
我有一个HTML表，其中包含从数据库中提取的记录。我正在使用PHP / MySQL。
我的表中名为Timer的列未从数据库中检索。我需要在这里显示经过的时间（从数据库中的特定时间）。例如，假设现在的时间是2013年2月21日下午6点20分，数据库中的时间是2013年2月21日下午5点50分，我需要定时器列显示00:30:00（自从5.50PM起已经过了30分钟）。它必须是正在运行计时器（不是可以通过使用MySQL日期时间差异计算的静态计时器），因此访问该页面的任何人都应该能够看到相同的经过时间。当我点击另一个按钮时，我还需要停止计时器。
我在这里看到了与此问题相关的其他帖子，如的功能。
I have a HTML table which has records pulled in from the database. I'm using PHP/MySQL.
The Column in my table named "Timer" is not retrieved from the database. I need the elapsed time (from the a specific time in the database) to be shown here. For Example, let's say the time now is 21 Feb 2013 6.20 pm and the time in the database is 21 Feb 2013 5.50 pm, I need the Timer Column to Display 00:30:00 (as thirty minutes have passed since 5.50PM). It must be a Running timer (Not a static one which can be computed by using MySQL datetime difference) so whoever accesses the page should be able to see the same elapsed time. I also need to stop the timer when I click another button.
I saw other posts here related to this question like this Elapsed Time to database from Javascript timer but I think what I'm asking is different. I'm still confused on how to go about doing this. I've very little Javascript knowledge, would be greatful if you could help me with it or refer me to the right place. Thank you!
This can be achieved with very little Javascript.
Assuming that the "Created" time is rendered dynamically in the table with format dd MMM yyyy hh:mm:ss, something like this should do the trick:
<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>Copy the code above into a file, say index.html, and open it in a browser. I tested it on Chrome.
It should update the elapsed time every 2 seconds, but you may change the update interval to something that suits you, e.g. to make it update every 5 minutes:
new ElapsedTimeLogger("#date", "#elapsed", 300);The general concept is to parse the rendered "Created" date into an epoch timestamp (in milliseconds) and then compute its difference with the current system time. To get the elapsed time updating dynamically you use Javascript's setInterval function. To stop updating the elapsed time use Javascript's clearTimeout function.
I lifted the prettyPrintTime function from powtac.
这篇关于从数据库中的给定时间开始经过的时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
